react-router 基础使用

初始化工程

create-react-app study_react_router --template typescript
yarn add react-router-dom

创建一个路由对象

1. 新建一个 router 文件夹

createBrowserRouter 和 createHashRouter 对应的就是 history 和 hash 两种模式的 router。具体的原理后面分析，这里以 createBrowserRouter 为例。

import { createBrowserRouter } from "react-router-dom"
import Home from "../pages/Home"

export default createBrowserRouter([
  {
    path: "/",
    Component: Home
  }
])

2. 在 index.tsx 引入

import router from "./router"

<RouterProvider router={router}></RouterProvider>

这样就可以在页面上面看到 Home 的内容了

配置 NotFound 页面

当我们没有匹配到对应的路由的时候，会有一个默认的 404 Not Found 页面。如果我们想自定义，则需要配置 path: "*" 的路由。

[...之前的路由配置, {    path: '*',    Component: NotFound}]

这样如果输入一个不存在的路由，就可以看到我们自定义的 NotFound 页面了。

当然我们也可以为每个路由单独配置 Error Page。

lazy

1. 方式一：

const Login = React.lazy(() => import("../pages/login"))

{
  path: "/login",
  Component: Login
}

2. 方式二

{
  path: '/login',
  lazy: () => import('../pages/login')
}

{
  path: "dashboard",
  async lazy() {
    let { Layout } = await import("./pages/Dashboard");
    return { Component: Layout };
  }
}

URL格式

protocol://hostname[:port]/path/[:parameters][?query]#fragment

嵌套路由

{
  path: "/",
  Component: Home,
  children: [
    {
      path: "/contacts/:contactId",
      Component: Contact
    }
  ]
},

然后在 Home 对应的显示的位置增加 <Outlet />，这样就可以看见页面了

跳转

1. 方式一：使用 Link 代替 a 标签

a 标签会进行网络请求（刷新整个页面），而使用 Link 标签的话就会走客户端路由，不会进行网络请求。

NavLink 和 Link 的区别就在于，NavLink 可以感知 active 或者 pending。在导航中你可以高亮显示当时选中的。

<Link to={`/contacts/1`}>Your Name</Link>

2. 方式二：使用 navigate 进行跳转

const navigate = useNavigate()

const handleNavigate = (contactId: string) => {
  navigate(`/contacts/${contactId}`)
}

Navigate 是对其的包装，在组件中使用相当于调用了上面的函数，可以直接跳转。

获取参数

1. 获取 parameter

const { contactId } = useParams()

2. 获取 query

const query = useSearchParams()[0] 
const contactId = query.get('contactId')