WHAT - NextJS 系列之 Routing - 路由系统 vs react-router-dom

Next.js 的路由系统并不基于 react-router-dom。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与 react-router-dom 有所不同。

Next.js 的路由系统

官方文档

Next.js 提供了一个基于文件系统的路由系统，这意味着每个页面都是一个独立的文件，存放在 pages 目录下。Next.js 会根据这些文件自动生成路由，而不需要像 react-router-dom 那样显式地定义路由表。

例如，如果在 Next.js 项目中创建了一个名为 pages/about.js 的文件，那么访问 /about 路径时，Next.js 就会自动加载并渲染 pages/about.js 文件中的内容。

特点和工作方式

1. 文件系统路由：

   • Next.js 的路由系统是基于文件系统的，这使得添加和管理页面变得非常简单和直观。

2. 动态路由：

   • Next.js 支持动态路由，可以通过文件名中使用 [param] 的形式来定义动态路径参数，例如 pages/posts/[id].js 可以匹配 /posts/1、/posts/2 等路径。

3. API 路由：

   • Next.js 还支持 API 路由，可以在 pages/api 目录下创建文件来定义服务器端的 API 端点，这些端点可以直接被客户端调用。

与 react-router-dom 的区别

react-router-dom 官方文档

• 配置方式：react-router-dom 需要显式配置路由表，定义路由组件和路径的映射关系；而 Next.js 则基于文件系统自动生成路由，无需显式配置。

• 生命周期：Next.js 提供了自己的生命周期和钩子函数，用于控制页面和组件的初始化、加载和卸载过程。这与 react-router-dom 提供的生命周期有所不同。

• 功能扩展：react-router-dom 提供了更多的高级功能和扩展性，如嵌套路由、路由守卫、自定义转场动画等，而 Next.js 的路由系统更加注重于简单易用和内置功能的优化。

结论

虽然 Next.js 和 react-router-dom 都用于在 React 应用程序中实现路由功能，但它们的实现方式和理念上有很大的不同。Next.js 的路由系统是其核心功能之一，基于文件系统的自动路由设计使得开发者能够更专注于页面和组件的编写，而无需过多关注路由的配置和管理。