Next.js 如何定义动态路由？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 动态路由的基本概念

动态路由允许你在 URL 中使用变量，从而根据不同的 URL 参数渲染不同的内容。Next.js 通过在 pages 目录下创建带有方括号 [] 的文件名来实现动态路由。

2. 动态路由的文件命名

在 pages 目录下，文件名中的方括号 [] 表示这是一个动态路由。例如：

pages/posts/[id].js 可以匹配 /posts/1、/posts/2 等路径。
pages/users/[username].js 可以匹配 /users/john、/users/jane 等路径。

3. 获取动态路由参数

在动态路由组件中，你可以使用 useRouter 钩子来获取路由参数。useRouter 返回一个 router 对象，其中 query 属性包含了所有的路由参数。

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

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

  return <p>Post: {id}</p>;
};

export default Post;

在这个例子中，id 是从 URL 中提取的动态参数。

4. 多段动态路由

你还可以定义多段动态路由。例如，pages/posts/[category]/[id].js 可以匹配 /posts/tech/1、/posts/life/2 等路径。

// www.javascriptcn.com code example
// pages/posts/[category]/[id].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { category, id } = router.query;

  return (
    <p>
      Category: {category}, Post: {id}
    </p>
  );
};

export default Post;

5. 可选动态路由

Next.js 还支持可选动态路由。通过在方括号内添加 ... 来表示可选参数。例如，pages/posts/[...slug].js 可以匹配 /posts/a、/posts/a/b、/posts/a/b/c 等路径。

// www.javascriptcn.com code example
// pages/posts/[...slug].js
import { useRouter } from 'next/router';

const Post = () => {
  const router = useRouter();
  const { slug } = router.query;

  return <p>Slug: {slug.join('/')}</p>;
};

export default Post;

在这个例子中，slug 是一个数组，包含了所有的路径片段。

6. 动态路由与静态生成

动态路由可以与 getStaticPaths 和 getStaticProps 结合使用，以实现静态生成。getStaticPaths 用于生成所有可能的路径，而 getStaticProps 用于在构建时获取数据。

// www.javascriptcn.com code example
// pages/posts/[id].js
import { useRouter } from 'next/router';

export async function getStaticPaths() {
  const paths = [{ params: { id: '1' } }, { params: { id: '2' } }];
  return { paths, fallback: false };
}

export async function getStaticProps({ params }) {
  const post = { id: params.id, title: `Post ${params.id}` };
  return { props: { post } };
}

const Post = ({ post }) => {
  return <p>Post: {post.title}</p>;
};

export default Post;

在这个例子中，getStaticPaths 定义了所有可能的路径，getStaticProps 在构建时获取数据并传递给组件。

Next.js 如何定义动态路由？

推荐答案