NextJS 中 url 中的动态路由和附加搜索参数答案

【问题标题】：Dynamic route and additional search params in url in NextJSNextJS 中 url 中的动态路由和附加搜索参数
【发布时间】：2021-09-08 20:08:37
【问题描述】：

我正在尝试使用 router.push(url); 重定向用户，其中 url 如下所示：[:lang]/something/[...dynamicRouteParams]?searchParam=true。

存在一个问题，用户被重定向到 URL 为：[:lang]/something/[...dynamicRouteParams]?searchParam=true&lang=something&dynamicRouteParams=item1&dynamicRouteParams=item2 的页面。

如何摆脱与路由参数相关的搜索参数？

【问题讨论】：

不可能这样做，因为 getStatciProps 在构建时运行并且它不包含查询。在这种情况下使用 getServerSideProps
我正在使用getServerSideProps，其中的 url 已经包含不需要的部分。你为什么认为我在使用getStaticProps？ router.push 方法中有一些东西将此类参数添加到 url（在调查了 nextjs 的代码库之后）

标签： javascript routes next.js

【解决方案1】：

是的，您可以通过 getServerSideProps 或 getStaticProps 执行此操作

export async function getServerSideProps({res, params }) {
  
  //get data you need from API or params
  const data = api or params
  //now redirect to a link with params
  res.setHeader("location", "/URL_WITH_PARAMS");
  // you still need 'return' because of react structure
    return {
      props: {
        data
      },
    }

}

注意：Router.push() 仅限客户端（渲染）

P.S 您可以传递任何参数并检索您登陆的页面。检查documentation

【讨论】：