react-router v6 特点

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 13 天，点击查看活动详情

说明：为了能够在非组件环境下拿到路由信息，需要我们安装一个history包

github.com/remix-run/r…

实现步骤

1. 安装history包：yarn add history
2. 创建 utils/history.js文件
3. 在app.js中使用我们新建的路由并配置history参数
4. 通过响应拦截器处理 token 失效，如果发现是401调回到登录页

代码实现

utils/history.js

// https://github.com/remix-run/react-router/issues/8264

import { createBrowserHistory } from 'history'
const history = createBrowserHistory()

export {
  history
}

app.js

import { history } from '@/utils'
import { unstable_HistoryRouter as HistoryRouter } from 'react-router-dom'

function App () {
  return (
    <HistoryRouter  history={history}>
      ...
    </HistoryRouter >

  )
}

export default App

utils/http.js

import { history } from './history'


http.interceptors.response.use((response) => {
  return response.data
}, error => {
  if (error.response.status === 401) {
    // 删除token
    clearToken()
    history.push('/login')
  }
  return Promise.reject(error)
})

概述

React Router 以三个不同的包发布到 npm 上，它们分别为：

react-router: 路由的核心库，提供了很多的：组件、钩子。 react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 BrowserRouter等 。 react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:NativeRouter等。 与React Router 5.x 版本相比，改变了什么？

内置组件的变化：移除Switch ，新增 Routes等。

语法的变化：component={About} 变为 element={About}等。

新增多个hook：useParams、useNavigate、useMatch等。

Routes 与 Route

v6版本中移除了先前的Switch，引入了新的替代者：Routes。

Routes 和 Route要配合使用，且必须要用Routes包裹Route。

Route 相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。

Route caseSensitive 属性用于指定：匹配时是否区分大小写（默认为 false）。

当URL发生变化时，Routes都会查看其所有子Route 元素以找到最佳匹配并呈现组件 。

Route 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 Outlet 组件来渲染其子路由。