React/Next.js中如何给动态路由传递额外参数？

方案一：使用查询参数（Query Params） #

这种方式无需修改路由结构，是最直接的实现方式，不会触发404错误。

1. 修改Link组件传递参数 #

把hidden参数作为查询字符串附加到URL后，或者用Next.js推荐的href对象格式传递：

// 方式1：模板字符串拼接
<Link href={`/${post.slug}?hidden=your-value`}>
  <a>点击跳转</a>
</Link>

// 方式2：对象格式（更易维护）
<Link href={{
  pathname: `/${post.slug}`,
  query: { hidden: 'your-value' } // 传递hidden参数
}}>
  <a>点击跳转</a>
</Link>

2. 在getServerSideProps中获取参数 #

查询参数不在params对象里，而是在query对象中，同时修正你代码里的语法错误（elseif应为else if，提前声明变量避免作用域问题）：

export const getServerSideProps = async ({ params, query }) => {
    console.log('slug参数:', params.slug);
    console.log('hidden参数:', query.hidden); // 从query中获取hidden

    let blogs;
    if (query.hidden) {
        // 执行hidden参数对应的API逻辑
        const { data } = await Axios.get(`https://xxx/your-hidden-api-endpoint?hidden=${query.hidden}`);
        blogs = data;
    } else {
        // 原有的slug逻辑
        const { data } = await Axios.get(`https://xxxxxxxxxxxxxxxxxxxxxxxxx/${params.slug}`);
        blogs = data;
    }

    return {
        props: {
            blogs
        },
    };
};

方案二：使用扩展动态路由（适合把参数放到URL路径中的场景） #

如果希望URL格式为/${post.slug}/hidden-value，需要调整页面路由结构：

1. 调整页面目录结构 #

在pages目录下创建[slug]文件夹，里面新建[hidden].js文件，原slug.js可保留作为无hidden参数时的页面。

2. 修改Link组件跳转路径 #

<Link href={`/${post.slug}/your-hidden-value`}>
  <a>点击跳转</a>
</Link>

3. 在新页面的getServerSideProps中获取参数 #

此时params对象会同时包含slug和hidden：

export const getServerSideProps = async ({ params }) => {
    console.log('slug:', params.slug);
    console.log('hidden:', params.hidden);

    let blogs;
    if (params.hidden) {
        // 对应API逻辑
        const { data } = await Axios.get(`https://xxx/api-with-hidden/${params.hidden}`);
        blogs = data;
    } else {
        // 备用逻辑
        const { data } = await Axios.get(`https://xxxxxxxxxxxxxxxxxxxxxxxxx/${params.slug}`);
        blogs = data;
    }

    return {
        props: {
            blogs
        },
    };
};

注意事项 #

• 之前的404错误是因为错误修改动态路由但未配置对应页面文件，或者传参方式不符合路由规则。
• 方案一更适合仅部分页面需要传递hidden参数的场景，不会影响原有页面的正常访问。

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