nextjs 路由

前言

nextjs 的路由部分，之前是 Pages Router。为了适应 react 的新特征，在 nextjs 的 13 版本之后有了一个进化版的 App Router。官方文档也推荐用 App Router的方式开发路由。
nextjs 的路由结构是基于文件系统的路径为路由路径的。

App Router

创建路由

app目录是整个工程的根路径。 app 文件里面的 page.jsx 文件是对应的根路由的页面。嵌套文件夹对应嵌套的路由，比如 app/test 文件夹对应 /test路由。但并不是所有的文件夹都可以当作路由页面的。
只有含有 **page.jsx**或 **route.js**的文件夹才会被渲染成路由页面。

- src
  - app
    - page.jsx // 响应 / 路由页面
    - about
      - page.jsx // 响应 /about 路由页面
    - login
      - page.jsx // 响应 /login 路由页面
      - test
        - page.jsx // 响应 /login/test 页面

动态路由

前面说了，文件夹的名字就是路由的名字，动态路由的改法就是改变文件夹的命名方式。
如果文件夹名字被命名为 [folder]的形式，就会被当作动态路由。

- src
  - app
    - page.jsx
    - about
      - page.jsx
      - [test]
        - page.jsx // 响应 /about/a 、/about/b、/about/c 等页面

切换路径（客户端）

切换路由的时候，不要使用 a 标签直接切换，会默认刷新页面。需要用特定的方式切换才会让页面不刷新。

1. Link 标签切换 ```javascript import Link from ‘next/link’

export default function Page() { return Dashboard }

2. useRouter() Hook
```javascript
"use client"
import Link from "next/link"
import { useRouter } from "next/navigation"
function AboutPage() {
  const router = useRouter()
  return (
    <>
      <div>Welcome to Next.js!</div>
      <button onClick={ () => router.push("/") }>点击回到首页</button>
      <Link href="/">回到首页</Link>
    </>
  )
}
export default AboutPage