跳到主要内容

Next.js 路由组

介绍​

在 Next.js 中，路由组（Route Groups）是一种强大的工具，允许你将相关的路由组织在一起，而不会影响 URL 结构。这对于大型应用程序尤其有用，因为它可以帮助你更好地管理路由文件，同时保持 URL 的简洁性。

路由组的主要特点包括：

  • 不影响 URL 结构：路由组不会改变 URL 路径。
  • 组织代码：通过将相关的路由文件放在同一个文件夹中，可以更清晰地组织代码。
  • 共享布局：可以在路由组中共享布局组件，减少重复代码。

基本用法​

在 Next.js 中，路由组是通过在文件夹名称中使用括号 () 来定义的。例如，假设你有一个博客应用程序，你可以将所有的博客相关路由放在一个名为 (blog) 的文件夹中。

示例结构​

plaintext
app/
├── (blog)/
│   ├── page.tsx
│   ├── [slug]/
│   │   └── page.tsx
├── page.tsx

在这个结构中，(blog) 是一个路由组。它包含两个路由：

  • /blog：显示博客列表。
  • /blog/[slug]：显示单个博客文章。

代码示例​

app/(blog)/page.tsx​

tsx
export default function BlogPage() {
  return <div>Blog List</div>;
}

app/(blog)/[slug]/page.tsx​

tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <div>Blog Post: {params.slug}</div>;
}

app/page.tsx​

tsx
export default function HomePage() {
  return <div>Home Page</div>;
}

输出​

  • 访问 / 将显示 Home Page。
  • 访问 /blog 将显示 Blog List。
  • 访问 /blog/my-first-post 将显示 Blog Post: my-first-post。
备注

路由组的文件夹名称不会出现在 URL 中。例如，(blog) 文件夹中的路由 /blog 仍然会映射到 /blog，而不是 /(blog)/blog。

共享布局​

路由组的一个强大功能是可以在组内共享布局。你可以在路由组中创建一个 layout.tsx 文件，该布局将应用于组内的所有路由。

示例结构​

plaintext
app/
├── (blog)/
│   ├── layout.tsx
│   ├── page.tsx
│   ├── [slug]/
│   │   └── page.tsx
├── page.tsx

app/(blog)/layout.tsx​

tsx
export default function BlogLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <h1>Blog Layout</h1>
      {children}
    </div>
  );
}

app/(blog)/page.tsx​

tsx
export default function BlogPage() {
  return <div>Blog List</div>;
}

app/(blog)/[slug]/page.tsx​

tsx
export default function BlogPost({ params }: { params: { slug: string } }) {
  return <div>Blog Post: {params.slug}</div>;
}

输出​

  • 访问 /blog 将显示：
    plaintext
    Blog Layout
    Blog List
  • 访问 /blog/my-first-post 将显示：
    plaintext
    Blog Layout
    Blog Post: my-first-post
提示

通过在路由组中共享布局，你可以避免在每个页面中重复相同的布局代码，从而提高代码的可维护性。

实际应用场景​

假设你正在开发一个电子商务网站，你可能有以下路由：

  • /products：显示产品列表。
  • /products/[id]：显示单个产品详情。
  • /cart：显示购物车页面。
  • /checkout：显示结账页面。

你可以使用路由组来组织这些路由：

plaintext
app/
├── (shop)/
│   ├── products/
│   │   ├── page.tsx
│   │   ├── [id]/
│   │   │   └── page.tsx
│   ├── cart/
│   │   └── page.tsx
│   ├── checkout/
│   │   └── page.tsx
├── page.tsx

通过这种方式，你可以将所有的商店相关路由放在 (shop) 路由组中，而不会影响 URL 结构。

总结​

Next.js 路由组是一种强大的工具，可以帮助你更好地组织和管理应用程序的路由。通过使用路由组，你可以：

  • 保持 URL 结构的简洁性。
  • 将相关的路由组织在一起，提高代码的可读性和可维护性。
  • 在路由组中共享布局，减少重复代码。

附加资源​

练习​

  1. 创建一个新的 Next.js 项目，并尝试使用路由组来组织你的路由。
  2. 在一个路由组中创建一个共享布局，并应用于组内的所有路由。
  3. 尝试在路由组中嵌套另一个路由组，看看 URL 结构如何变化。

通过完成这些练习，你将更好地理解 Next.js 路由组的使用方法和优势。