NextJS-将查询参数附加到动态路由

ibrsph3r 于 2022-10-01 发布在其他

关注(0)|答案(7)|浏览(137)

在我的NextJS应用程序中，我有一个在每个页面上都可见的语言选择器。当我选择一种新语言时，我只想通过在URL后面附加一个查询参数lang=en来替换当前的URL。

以下是替换URL的函数：

const changeLanguage = (lang: LanguageID) => {
    replace({
      pathname,
      query: { ...query, lang },
    });
  };

在本例中，replace、query和pathname来自下一台路由器。

现在，所有东西都适用于静态路由，但我无法使其适用于动态路由。例如，我的文件夹结构如下：

pages
|_customers
|__index.tsx
|__[customerId].tsx

如果我在http://localhost/customers上，我将我的语言更改为英语，URL将更改为http://localhost/customers?lang=en，这正是我想要的。但是，如果我在http://localhost/customer/1上，并且我将我的语言更改为英语，则URL将更改为http://localhost/customers/[customerId]?customerId=1&lang=en，而不是我预期的http://localhost/customers/1?lang=en。

现在，我知道我可以在路由器上使用asPath，并通过将lang附加到查询字符串对象来重新构建它，但我觉得下一步应该内置它。此外，我知道用香草JS可以很容易地完成，但这不是这里的重点。

我是不是遗漏了什么？有没有一种更简单的方法来将查询参数附加到动态路由，而无需进行服务器端重新呈现？

谢谢

next.js

来源：https://stackoverflow.com/questions/61466891/nextjs-appending-a-query-param-to-a-dynamic-route

7条答案

按热度按时间

myzjeezk1#

只需向当前路由器添加更多参数，然后自行推送

const router = useRouter();
router.query.NEWPARAMS = "VALUE"
router.push(router)

赞(0）回复(0）举报 2022-10-01

iyzzxitl2#

如果我们想要将其作为链接--请这样使用：

// ...
const { query } = useRouter();
// ...

<Link
    href={{
        pathname: router.pathname,
        query: { ...query, lang },
    }}
    passHref
    shallow
    replace
></Link>

赞(0）回复(0）举报 2022-10-01

olqngx593#

这个解决方案不需要发送之前的整个路由，因为replace只是替换了我们需要替换的内容，所以查询pars：

const router = useRouter();
router.replace({
   query: { ...router.query, key: value },
});

赞(0）回复(0）举报 2022-10-01

fkvaft9z4#

我最终使用了我一开始就想避免的解决方案，即使用asPath值。至少，因为路径是相同的，所以没有进行服务器端重新渲染。

下面是我更新的changeLanguage函数(stringifyUrl来自query-string包)

const changeLanguage = (lang: LanguageID) => {
    const newPathname = stringifyUrl({ url: pathname, query: { ...query, lang } });
    const newAsPath = stringifyUrl({ url: asPath, query: { lang } });
    replace(newPathname, newAsPath);
  };

赞(0）回复(0）举报 2022-10-01

x8diyxa75#

我尝试将我的参数添加到路由查询并推送路由器本身，正如前面提到的here，它起作用了，但收到了很多警告：

因此，我随后推送到/并按如下方式传递我的查询参数：

const router = useRouter();
router.push({ href: '/', query: { myQueryParam: value  } });

我希望这对你也适用。

赞(0）回复(0）举报 2022-10-01

w1e3prcc6#

如果有人还在寻找下一步的答案，js^11.1.2，我希望这对你有帮助。

const router = useRouter();
router.push({ pathname: "/search", query: { key: key } });

赞(0）回复(0）举报 2022-10-01

wa7juj8i7#

如果您在Next.js中有动态路由，并且希望对路由进行浅层调整以反映更新的查询参数，则另一种方法是尝试：

const router = useRouter()
const url = {
      pathname: router.pathname,
      query: { ...router.query, page: 2 }
    }
router.push(url, undefined, { shallow: true })

这将检索当前路径(router.pathname)和查询(router.query)详细信息，并将它们与新的page查询参数合并。如果您忘记合并现有的查询参数，您可能会看到如下错误：

提供的HREF值缺少要正确内插的查询值

赞(0）回复(0）举报 2022-10-01

我来回答

NextJS-将查询参数附加到动态路由

7条答案

相关问题

热门标签

最新问答