Next.js 嵌套路由

在构建现代 Web 应用时，路由系统是至关重要的。Next.js 提供了一个强大且灵活的路由系统，允许开发者轻松地创建复杂的页面结构。嵌套路由是其中一个关键功能，它允许你在页面中嵌套其他页面，从而构建出层次化的用户界面。

什么是嵌套路由？

嵌套路由是指在一个路由下嵌套另一个路由，形成父子关系。这种结构非常适合构建复杂的页面布局，例如仪表盘、设置页面或多级导航菜单。

在 Next.js 中，嵌套路由是通过文件系统的结构来实现的。你只需在 pages 目录下创建子目录，Next.js 会自动将这些子目录映射为嵌套路由。

基本用法

假设你有一个简单的博客应用，你希望在 /posts 路由下嵌套 /posts/:id 路由来显示单个博客文章。你可以通过以下方式实现：

在 pages 目录下创建一个 posts 目录。
在 posts 目录下创建一个 [id].js 文件。

javascript
// pages/posts/[id].js
import { useRouter } from 'next/router';

export default function Post() {
  const router = useRouter();
  const { id } = router.query;

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

当你访问 /posts/1 时，页面将显示 Post: 1。

嵌套布局

嵌套路由的一个常见用途是创建嵌套布局。例如，你可能希望在 /dashboard 路由下嵌套 /dashboard/settings 和 /dashboard/profile 路由，并且这些子路由共享一个共同的布局。

你可以通过在 pages/dashboard 目录下创建一个 _app.js 文件来实现这一点：

javascript
// pages/dashboard/_app.js
import Layout from '../../components/DashboardLayout';

export default function DashboardApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

然后，你可以在 pages/dashboard 目录下创建 settings.js 和 profile.js 文件：

javascript
// pages/dashboard/settings.js
export default function Settings() {
  return <p>Settings Page</p>;
}

javascript
// pages/dashboard/profile.js
export default function Profile() {
  return <p>Profile Page</p>;
}

现在，当你访问 /dashboard/settings 或 /dashboard/profile 时，这些页面将共享 DashboardLayout 布局。

动态嵌套路由

Next.js 还支持动态嵌套路由。例如，你可能希望在 /products 路由下嵌套 /products/:category/:id 路由来显示特定类别的产品详情。

你可以通过以下方式实现：

在 pages 目录下创建一个 products 目录。
在 products 目录下创建一个 [category] 目录。
在 [category] 目录下创建一个 [id].js 文件。

javascript
// pages/products/[category]/[id].js
import { useRouter } from 'next/router';

export default function Product() {
  const router = useRouter();
  const { category, id } = router.query;

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

当你访问 /products/electronics/123 时，页面将显示 Category: electronics, Product ID: 123。

实际应用场景

嵌套路由在实际应用中有很多用途。以下是一些常见的场景：

仪表盘：在 /dashboard 路由下嵌套 /dashboard/settings、/dashboard/profile 等子路由，共享一个共同的布局。
博客：在 /posts 路由下嵌套 /posts/:id 路由来显示单个博客文章。
电商网站：在 /products 路由下嵌套 /products/:category/:id 路由来显示特定类别的产品详情。

总结

Next.js 的嵌套路由功能为开发者提供了极大的灵活性，使得构建复杂的页面结构变得简单而直观。通过合理地使用嵌套路由，你可以轻松地创建层次化的用户界面，并共享布局和逻辑。

附加资源

练习

创建一个简单的博客应用，使用嵌套路由来显示博客文章列表和单个文章详情。
尝试在 /dashboard 路由下嵌套多个子路由，并共享一个共同的布局。
探索如何在动态嵌套路由中使用 getStaticProps 和 getServerSideProps 来预取数据。

通过完成这些练习，你将更好地理解 Next.js 嵌套路由的工作原理，并能够在实际项目中灵活运用。

什么是嵌套路由？​

基本用法​

嵌套布局​

动态嵌套路由​

实际应用场景​

总结​

附加资源​

练习​