Next.js 如何获取路由参数？

推荐答案

在 Next.js 中，获取路由参数可以通过 useRouter 钩子或 getServerSideProps 和 getStaticProps 方法来实现。以下是两种常见的方式：

1. 使用 useRouter 钩子

// www.javascriptcn.com code example
import { useRouter } from 'next/router';

const MyComponent = () => {
  const router = useRouter();
  const { id } = router.query;

  return <div>Post ID: {id}</div>;
};

export default MyComponent;

2. 使用 getServerSideProps 或 getStaticProps

// www.javascriptcn.com code example
export async function getServerSideProps(context) {
  const { id } = context.params;

  return {
    props: {
      id,
    },
  };
}

const MyComponent = ({ id }) => {
  return <div>Post ID: {id}</div>;
};

export default MyComponent;

本题详细解读

1. 使用 useRouter 钩子

useRouter 是 Next.js 提供的一个钩子，用于访问路由信息。通过 router.query 可以获取动态路由参数。例如，如果路由是 /posts/[id]，那么 router.query.id 将返回 id 参数的值。

• 优点：简单易用，适合在客户端获取路由参数。
• 缺点：只能在客户端使用，无法在服务器端渲染时获取参数。

2. 使用 getServerSideProps 或 getStaticProps

getServerSideProps 和 getStaticProps 是 Next.js 提供的用于服务器端渲染和静态生成的方法。通过 context.params 可以获取动态路由参数。

• getServerSideProps：每次请求时都会调用，适合需要动态数据的页面。

• getStaticProps：在构建时生成静态页面，适合内容不经常变化的页面。

• 优点：可以在服务器端获取路由参数，适合需要服务器端渲染的场景。

• 缺点：相对于 useRouter，代码稍微复杂一些。

总结

• 如果你只需要在客户端获取路由参数，使用 useRouter 是最简单的方式。
• 如果你需要在服务器端获取路由参数，或者需要服务器端渲染，使用 getServerSideProps 或 getStaticProps 是更好的选择。