如何在NextJS中向Router.push添加查询参数？

在Next.js中，向Router.push添加查询参数是一个简单且常见的操作。Router.push 方法允许你进行客户端的导航，包括传递查询参数。我们可以通过两种主要方式添加查询参数：

方法一：字符串拼接

我们可以直接在 URL 字符串中添加查询参数。这种方法比较直观，特别是当查询参数较少且固定时。

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

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

  const handleClick = () => {
    router.push('/about?name=John&age=30');
  };

  return (
    <button onClick={handleClick}>Go to About</button>
  );
};

export default Component;

在上面的例子中，我们添加了两个查询参数 name 和 age 到 /about 页面的 URL 中。

方法二：使用 URL 对象

如果查询参数较多或需要动态生成，使用 URL 对象会更加灵活和可读。这种方式可以让我们先构造一个 URL 对象，然后将其转换为字符串传递给 Router.push。

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

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

  const handleClick = () => {
    const url = new URL(window.location.href);
    url.pathname = '/about';
    url.searchParams.set('name', 'John');
    url.searchParams.set('age', '30');

    router.push(url.href);
  };

  return (
    <button onClick={handleClick}>Go to About</button>
  );
};

export default Component;

在这个例子中，我们使用了 URL 对象来构建完整的 URL，包括查询参数。之后，我们将这个 URL 的 href 属性传递给 Router.push 方法。这种方法的好处是可以更方便地管理和修改 URL 的各个部分，尤其是当参数较多或需要条件性地添加参数时。

总结

这两种方法各有优势，可以根据具体情况和个人偏好选择使用。字符串拼接适合查询参数少且简单的场景，而使用 URL 对象则适合查询参数较多或较为复杂的场景。在实际开发中，了解并合理利用这两种方法能有效提高开发效率和代码的可维护性。