跳到主要内容

Next.js 基于文件的路由

Next.js 是一个功能强大的 React 框架，提供了许多开箱即用的功能，其中之一就是基于文件的路由系统。通过这种路由系统，开发者无需手动配置路由规则，只需按照特定的文件结构组织页面文件，Next.js 就会自动生成对应的路由。

什么是基于文件的路由？​

在传统的 React 应用中，路由通常是通过 react-router-dom 等库手动配置的。而在 Next.js 中，路由是基于文件系统自动生成的。这意味着你只需在 pages 目录下创建文件，Next.js 就会根据文件的路径自动生成对应的路由。

例如，如果你在 pages 目录下创建了一个文件 about.js，Next.js 会自动生成 /about 路由。

基本路由​

让我们从一个简单的例子开始。假设你的项目结构如下：

pages/
  index.js
  about.js
  contact.js
  • index.js 对应根路由 /
  • about.js 对应 /about
  • contact.js 对应 /contact

示例代码​

jsx
// pages/index.js
export default function Home() {
  return <h1>Welcome to the Home Page!</h1>;
}

// pages/about.js
export default function About() {
  return <h1>About Us</h1>;
}

// pages/contact.js
export default function Contact() {
  return <h1>Contact Us</h1>;
}

当你访问 / 时，会显示 Home 组件的内容；访问 /about 时，会显示 About 组件的内容，以此类推。

嵌套路由​

Next.js 还支持嵌套路由。你只需在 pages 目录下创建子目录，Next.js 会自动生成嵌套的路由。

例如，假设你的项目结构如下：

pages/
  index.js
  blog/
    index.js
    post.js
  • blog/index.js 对应 /blog
  • blog/post.js 对应 /blog/post

示例代码​

jsx
// pages/blog/index.js
export default function Blog() {
  return <h1>Blog Home Page</h1>;
}

// pages/blog/post.js
export default function Post() {
  return <h1>Blog Post Page</h1>;
}

访问 /blog 时，会显示 Blog 组件的内容；访问 /blog/post 时，会显示 Post 组件的内容。

动态路由​

Next.js 还支持动态路由，允许你根据 URL 中的参数动态生成页面。动态路由的文件名需要用方括号 [] 包裹。

例如，假设你有一个博客系统，每篇博客文章都有一个唯一的 ID，你可以创建一个动态路由文件 [id].js。

示例代码​

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

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

  return <h1>Blog Post: {id}</h1>;
}

当你访问 /blog/123 时，页面会显示 Blog Post: 123。

实际应用场景​

博客系统​

假设你正在构建一个博客系统，每篇博客文章都有一个唯一的 ID。你可以使用动态路由来为每篇文章生成一个独立的页面。

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

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

  return (
    <div>
      <h1>Blog Post: {id}</h1>
      <p>This is the content of blog post {id}.</p>
    </div>
  );
}

用户个人资料页面​

如果你正在构建一个社交网络应用，每个用户都有一个唯一的用户名，你可以使用动态路由来生成用户的个人资料页面。

jsx
// pages/users/[username].js
import { useRouter } from 'next/router';

export default function UserProfile() {
  const router = useRouter();
  const { username } = router.query;

  return (
    <div>
      <h1>User Profile: {username}</h1>
      <p>This is the profile page of {username}.</p>
    </div>
  );
}

总结​

Next.js 的基于文件的路由系统极大地简化了路由配置的过程。通过简单的文件结构，你可以轻松地生成静态路由、嵌套路由和动态路由。这种路由系统不仅提高了开发效率，还使得代码更加易于维护。

提示

如果你想要进一步学习 Next.js 的路由系统，可以尝试以下练习：

  1. 创建一个包含多个页面的博客系统，并使用动态路由为每篇博客文章生成独立的页面。
  2. 尝试使用嵌套路由构建一个多级导航的网站。

附加资源​