nextj路由跳转

在 Next.js 中，路由跳转是一个常见的操作，有多种方式可以实现页面导航。以下是几种常见的路由跳转方法：

1. 使用 Link 组件

Link 组件是 Next.js 中最常用的方式，用于客户端导航。它会预加载目标页面，以加快导航速度。

示例代码：

javascript
复制代码
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about">
        <a>Go to About Page</a>
      </Link>
    </div>
  );
}

2. 使用 useRouter 钩子中的 push 方法

useRouter 是 Next.js 提供的一个钩子，允许你访问路由对象并执行程序化的导航。router.push 用于跳转到指定路径。

示例代码：

javascript
复制代码
import { useRouter } from 'next/router';

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

  const goToAboutPage = () => {
    router.push('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToAboutPage}>Go to About Page</button>
    </div>
  );
}

3. 使用 router.replace

router.replace 与 router.push 类似，但它不会在浏览器历史中创建新的条目，而是替换当前条目。这在某些情况下，如重定向时，可能很有用。

示例代码：

javascript
复制代码
import { useRouter } from 'next/router';

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

  const replaceToAboutPage = () => {
    router.replace('/about');
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={replaceToAboutPage}>Replace with About Page</button>
    </div>
  );
}

4. 使用 router.push 或 router.replace 与参数

你可以使用 router.push 或 router.replace 方法传递动态路由参数、查询字符串或哈希片段。

示例代码：

javascript
复制代码
import { useRouter } from 'next/router';

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

  const goToProductPage = () => {
    router.push({
      pathname: '/product/[id]',
      query: { id: '123' },
    });
  };

  return (
    <div>
      <h1>Home Page</h1>
      <button onClick={goToProductPage}>Go to Product Page with ID 123</button>
    </div>
  );
}

5. 使用 <Link> 组件的 replace 属性

Link 组件也可以使用 replace 属性来替换当前的历史记录条目，而不是创建一个新的条目。

示例代码：

javascript
复制代码
import Link from 'next/link';

export default function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link href="/about" replace>
        <a>Replace with About Page</a>
      </Link>
    </div>
  );
}

6. 页面重定向

有时你需要在服务端或客户端进行页面重定向。以下是在 getServerSideProps 中使用重定向的示例：

示例代码：

javascript
复制代码
export async function getServerSideProps(context) {
  return {
    redirect: {
      destination: '/about',
      permanent: false,  // false 为 302 重定向, true 为 301 重定向
    },
  };
}

export default function HomePage() {
  return <div>Redirecting...</div>;
}

总结

• Link 组件：适合静态链接导航。
• useRouter 的 push 方法：适合动态和程序化导航。
• replace：用于替换当前的历史记录条目。
• 动态参数导航：通过 router.push 传递路径、查询参数和哈希片段。
• 重定向：在服务器或客户端进行页面重定向。