Next.js文件系统路由介绍
Next.js使用基于文件系统的路由方式,这与传统React应用中基于代码声明路由形成对比。
Next.js文件路由 vs 传统React路由
在不使用Next.js的React应用中,我们通常需要通过导入react-router-dom
并在代码中声明路由来设置路由:
// App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
function App() {
return (
<Router>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
)
}
这需要编写额外的路由设置代码。
而在Next.js中,我们可以直接通过文件系统结构来定义路由,无需任何额外声明。
Next.js文件路由示例
在Next.js中,pages
目录下的文件结构即路由结构。
pages/
index.js -> '/'
about.js -> '/about'
根路由
pages/index.js
对应网站根路径/
:
// pages/index.js
export default function Home() {
return <h1>Home</h1>
}
根路由一般使用index.js
文件进行声明。
标准路由
与根路由类似,普通的路由也可以直接通过文件进行定义:
pages/about.js
对应/about
路径:
// pages/about.js
export default function About() {
return <h1>About</h1>
}
嵌套路由
对于嵌套的路由路径,我们可以使用文件夹的方式进行嵌套:
pages/blog/[id].js
对应嵌套路径/blog/:id
:
[]表示这是一个动态路由参数,参数名称可以进行自定义。
// pages/blog/[id].js
export default function Post() {
return <h1>Post</h1>
}
获取动态参数
在动态路由组件内,可以通过useRouter
hook来获取具体的参数值:
// pages/blog/[id].js
import { useRouter } from 'next/router'
export default function Post() {
const router = useRouter()
const { id } = router.query
return <h1>Post {id}</h1>
}
以上示例展示了Next.js文件路由的各种使用方式,可以满足实际应用的多种场景。Next.js通过文件系统组织路由,让我们的React应用更简单直接。