NextJS 如何将 query 参数附加到动态路由上？

在 Next.js 中，将查询参数附加到动态路由上的常见方法是通过使用链接组件（Link）或编程式导航（使用router.push或router.replace）来实现。

使用 Link 组件

当你使用 Next.js 的 Link 组件时，可以将查询参数作为对象传递给 href 属性。例如，假设你有一个动态路由 [id].js，你可以这样创建一个链接：

jsx
import Link from 'next/link';

const MyComponent = () => {
  return (
    <Link href={{ pathname: '/post/[id]', query: { foo: 'bar' } }} as="/post/123?foo=bar">
      <a>Go to Post</a>
    </Link>
  );
};

在这个例子中，pathname 是路由模式，query 对象包含了你想要附加的查询参数。as 属性是实际的URL，可能包含查询参数，用于浏览器地址栏展示。

使用编程式导航

如果你想要在代码中触发导航，可以使用 Next.js 的 useRouter 钩子来获取 router 对象，然后调用 push 或 replace 方法。

jsx
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();

  const goToPost = () => {
    router.push({
      pathname: '/post/[id]',
      query: { foo: 'bar' },
    }, '/post/123?foo=bar');
  };

  return (
    <button onClick={goToPost}>Go to Post</button>
  );
};

在这个例子中，pathname 和 query 对象结构与使用 Link 组件时相同，router.push 的第二个参数是实际的URL，用于浏览器地址栏显示。

注意事项

• 在 Link 组件或 router.push/router.replace 中，query 参数是可选的。你可以仅提供动态路由的路径，而不带查询参数。
• 当你在 as 参数或 router.push/router.replace 的第二个参数中直接提供查询参数时，确保正确地编码URL，尤其是当查询参数值包含特殊字符时。
• 在动态路由页面中，你可以通过 useRouter 钩子的 query 对象访问这些查询参数。

下面是一个如何在动态路由页面中获取查询参数的例子：

jsx
import { useRouter } from 'next/router';

const PostPage = () => {
  const router = useRouter();
  const { id, foo } = router.query;

  return (
    <div>
      <h1>Post: {id}</h1>
      <p>Query Parameter: {foo}</p>
    </div>
  );
};

export default PostPage;

这段代码展示了在动态路由页面 PostPage 中，如何使用 useRouter 的 query 对象来获取路由参数和查询参数。

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

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

该解决方案不需要发送整个先前的路由，只需replace替换我们需要替换的内容，因此查询参数：

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

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

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

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

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

shell
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 值缺少需要正确插值的查询值

我尝试将我的参数添加到路由查询中并推送路由器本身，如此处所述，它有效，但我收到了很多警告：

因此，我然后推送/并传递了我的查询参数，如下所示：

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

我希望这也适合你。