Next.js 13（Pages目录）多查询参数使用及取值问题

你的问题出在Next.js动态路由的命名规则不支持直接识别带=和&的结构，你创建的[property1]&[property2].js会被路由系统当成单个动态参数，自然无法拆分出property1和property2。以下是两种基于Pages目录的可行方案：

方案一：路由重写+专门页面处理 #

通过next.config.js的路由重写规则，把目标格式的路径导向专门的参数解析页面：

1. 修改项目根目录的next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        source: '/:params*',
        destination: '/parse-params',
      },
    ];
  },
};

module.exports = nextConfig;

2. 在pages目录下创建parse-params.js页面，手动解析参数：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function ParseParams() {
  const router = useRouter();
  const [params, setParams] = useState({});

  useEffect(() => {
    // 提取路径中的参数字符串（去掉开头的/）
    const paramStr = router.asPath.slice(1);
    // 拆分键值对并解析
    const paramPairs = paramStr.split('&');
    const parsed = {};
    paramPairs.forEach(pair => {
      const [key, value] = pair.split('=');
      if (key && value) parsed[key] = decodeURIComponent(value);
    });
    setParams(parsed);
  }, [router.asPath]);

  return (
    <div>
      <p>property1: {params.property1}</p>
      <p>property2: {params.property2}</p>
    </div>
  );
}

方案二：Catch-All动态路由直接解析 #

用通配符动态路由捕获整个路径，再手动拆分参数：

在pages目录下创建[...params].js文件：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function CatchAllParams() {
  const router = useRouter();
  const [parsedParams, setParsedParams] = useState({});

  useEffect(() => {
    if (!router.query.params?.[0]) return;
    // Catch-All路由会把路径内容存入params数组的第一个元素
    const paramStr = router.query.params[0];
    const paramPairs = paramStr.split('&');
    const parsed = {};
    paramPairs.forEach(pair => {
      const [key, value] = pair.split('=');
      if (key && value) parsed[key] = decodeURIComponent(value);
    });
    setParsedParams(parsed);
  }, [router.query]);

  return (
    <div>
      <p>property1: {parsedParams.property1}</p>
      <p>property2: {parsedParams.property2}</p>
    </div>
  );
}

注意事项 #

• 如果参数值包含特殊字符，必须用decodeURIComponent解码避免乱码
• 可以根据需求添加参数缺失的容错处理逻辑

内容的提问来源于stack exchange，提问作者Rifky Niyas