在Next.js（TypeScript）中如何通过URL参数跳转页面？

下面是两种常用的实现方式，适配不同的Next.js路由体系：

1. 使用Link组件（推荐的客户端导航方式） #

Pages Router（Next.js 12及以下） #

直接用next/link包裹按钮，通过对象形式定义href，TypeScript会自动校验参数格式：

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Link
        href={{
          pathname: '/path',
          query: { queryParam: 'value' }
        }}
      >
        <button>跳转到指定页面</button>
      </Link>
    </div>
  );
}

App Router（Next.js 13+） #

App Router的next/link用法类似，同样支持对象式href：

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <Link
        href={{
          pathname: '/path',
          query: { queryParam: 'value' }
        }}
      >
        <button>跳转到指定页面</button>
      </Link>
    </div>
  );
}

也可以直接写字符串形式的href：

<Link href="/path?queryParam=value">
  <button>跳转到指定页面</button>
</Link>

2. 编程式导航（适合需要前置逻辑的场景） #

Pages Router #

使用next/router的useRouter钩子，在按钮点击事件中手动触发跳转：

import { useRouter } from 'next/router';

export default function Home() {
  const router = useRouter();

  const handleClick = () => {
    router.push({
      pathname: '/path',
      query: { queryParam: 'value' }
    });
  };

  return (
    <div>
      <button onClick={handleClick}>跳转到指定页面</button>
    </div>
  );
}

App Router #

使用next/navigation的useRouter钩子：

import { useRouter } from 'next/navigation';

export default function Home() {
  const router = useRouter();

  const handleClick = () => {
    router.push('/path?queryParam=value');
    // 或者用URLSearchParams拼接参数
    // const params = new URLSearchParams({ queryParam: 'value' });
    // router.push(`/path?${params}`);
  };

  return (
    <div>
      <button onClick={handleClick}>跳转到指定页面</button>
    </div>
  );
}

注意事项 #

• 客户端导航（Link组件或编程式push）不会刷新整个页面，性能更优；若需服务端导航可使用普通<a>标签，但不推荐在Next.js项目中频繁使用。
• TypeScript会自动校验href对象的格式，避免路径和参数拼写错误。

内容的提问来源于stack exchange，提问作者Kristóf Göncző