探索NextJs（二）Next.js文件路由特性

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应用更简单直接。