React Router 6 快速上手

React Router 6 是 react-router-dom 的 v6 版本，此版本已是 create-react-app 创建 react 项目时的默认版本，本文主要记录 v6 版本的基本使用以及常用 API，会与 v5 做一些比较：

更多详情请查阅：React Router 中文文档

NPM 安装

如果项目中还没有安装 React Router 则可以进行如下 NPM 安装，默认安装的就是 v6 版本：

npm i react-router-dom

Component

下面是 react-router-dom v6 中常用的组件介绍：

 <BrowserRouter>与<HashRouter>

<BrowserRouter> 组件用于包裹整个需要使用到路由组件的应用区域（一般用于包裹整个 <App />），它也表示当前路由模式为 BrowserRouter 模式，除了使用 <BrowserRouter> 之外还可以使用 <HashRouter> 组件，用法相同，它表示当前路由模式为 HashRouter（具体表现为页面地址栏中会出现一个 /# ）

注：v6 版本中的 <BrowserRouter> 和 <HashRouter> 用法与 v5 相同。

代码示例：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
// 引入路由模式的包裹组件 BrowserRouter / HashRouter
import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>

注：以下 组件 和 API 除特殊说明外均默认表示是在被上述<BrowserRouter> 或 <HashRouter> 组件包裹的应用区域内使用！

<Routes>与<Route>

 v6 版本中移除了先前的 Switch 组件，引入了新的替代者：<Routes>；

<Routes>与<Route>需要搭配使用，且必须要使用 <Routes> 包裹 <Route>（注：哪怕仅有一个 <Route> 也需要使用 <Routes> 包裹，<Routes> 不能省略！）；

<Route> 用于配置路由路径 path 与 组件 element 之间对应的映射关系，只要 path 与当前 URL 匹配（默认为非严格模式）就会渲染 element 配置的组件；

<Route caseSensitive>： caseSensitive 属性用于指定匹配 path 时是否区分大小写，默认 false 不区分；

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

代码示例-常规写法：

// ...
import {NavLink, Routes, Route} from 'react-router-dom'
//...
export default function App() {
  return (
    <>
    <h1>App</h1>
    <hr />
    {/* 路由链接 */}
    <NavLink className="tab" to='/home'>Home</NavLink><br />
    <NavLink className="tab" to='/about'>About</NavLink><br />
    <hr />
    {/* 配置路由映射关系 */}
    <Routes>
      <Route path='/home' element={<Home/>} />
      <Route path='/about' element={<About/>} />
    </Routes>

    </>
  )
}

代码示例-路由表写法 (v6 新增)：

注：以下代码是写在 src/routes/index.js 文件中

// 此文件用于统一配置路由表
import {Navigate} from 'react-router-dom'
import Home from '../pages/Home'
import About from '../pages/About'

// 定义路由表
const routes =  [
  {
    path: '/home',
    element: <Home />,
    // 配置子路由，没有可以不写
    children: []
  },
  {
    path: '/about',
    element: <About />
  },
  // 仍旧配置路由重定向
  {
    path: '/',
    element: <Navigate to='/home' />
  }
]
// 导出
export default routes

注：路由表列表中每一个配置项的数据格式类型如下：

interface RouteObject {
    caseSensitive?: boolean;        // 是否区分大小写
    children?: RouteObject[];       // 是否配置嵌套路由
    element?: React.ReactNode;      // 路径映射的组件
    // 是否 URL 在仅匹配到父组件的 path 时展示出来，此值为 true 则此路由为索引路由，则 path 和 children 均不要写
    index?: boolean;
    path?: string;                  // 用于跳转时匹配的路径
}

使用路由表：

//...
import {NavLink, useRoutes} from 'react-router-dom'
// 导入自定义的统一的路由表
import router from './routes'

export default function App() {
  // 根据路由表生成对应的路由规则
  const routes = useRoutes(router)
  return (
    <>
    <h1>App</h1>
    <hr />
    {/* 路由链接 */}
    <NavLink className="tab" to='/home'>Home</NavLink><br />
    <NavLink className="tab" to='/about'>About</NavLink><br />
    <hr />
    {/* 配置路由映射关系 */}
    {/* 使用路由表的方式 */}
    {routes}
    </>
  )
}

注：更推荐使用“路由表”的写法，这样路由配置多了，可以从路由配置表中看出路由的结构以及映射关系，且路由更容易管理。所以后续涉及到路由配置的均出示“路由表”的写法。

<Link>与<NavLink>

<Link>与<NavLink> 的作用都是修改 URL 且不发送网络请求主要用于路由链接跳转，二者的用法完全相同，to 属性指定要跳转的目标路径，区别在于 <NavLink> 可用于自动实现链接“高亮”效果，若当前 URL 与 to 属性的值匹配则该标签会自动添加一个 active 的类名帮助我们实现选中项的“高亮”效果；active 类名也可以自定义，但用处不多，若需要可自行查阅官方文档；如果多级路由时仅想要当前子级的 <NavLink> 处于“高亮”，父级组件的 <NavLink> 不“高亮”则可以给父级的 <NavLInk end> 组件新增 end 属性即可。

示例代码：

// ...
import {NavLink} from 'react-router-dom'

// ...
{/* 路由链接 */}
<NavLink className="tab" to='/home'>Home</NavLink><br />
<NavLink className="tab" to='/about'>About</NavLink><br />

<Navigate>

<Navigate> 内置组件主要可用作 路由重定向 或 默认兜底路由，该组件只要被渲染当前 URL 就会被修改为其 to 属性指定的路径，切换视图：

代码示例-常规写法：

import {Routes, Route, Navigate} from 'react-router-dom'
// ...
{/* 配置路由映射关系 */}
    <Routes>
      // ...
      {/* 使用 Navigate 组件进行路由重定向 */}
      <Route path='/' element={<Navigate to='/home' />} />
    </Routes>

代码示例-路由表写法： 

import {Navigate} from 'react-router-dom'
// ...
// 路由表中配置路由重定向
  {
    path: '/',
    element: <Navigate to='/home' />
  }

<Outlet>

用于当 <Route> 产生嵌套时，渲染其对应的后续子级路由（相当于子级路由的“占位符”）

代码示例：

// ...
import { Outlet } from 'react-router-dom'
// ...
return (
    <div>
        {/* ... */}
        {/* 放置二级路由显示位置的占位组件 */}
        <Outlet />
    </div>
  )
// ...

hooks

以下主要介绍 v6 版本中目前常用的一些 hook ，全量信息请查阅官方

useRoutes()

当配置路由时使用“路由表”的方式时，需要使用 useRoutes() 根据“路由表”创建出对应的 <Routes> 和 <Route> 的路由结构；

代码示例：

// ...
import { useRoutes } from 'react-router-dom'
// ...
// 导入自定义的统一的路由表
import router from './routes'

export default function App() {
  // 根据路由表生成对应的路由规则
  const routes = useRoutes(router)
  return (
    <>
    {/* ... */}
    {/* 使用路由表的方式 */}
    {routes}
    </>
  )
}

useNavigate()

useNavigate() hook 返回一个函数用于实现编程式导航，接收两个参数：

参数1：可以指定具体跳转的路径、可以为数字表示前进或后退

参数2：为一个对象：{replace: true/false, state:{}}

代码示例：

// ...
import { useNavigate } from 'react-router-dom'
export default function Demo() {
  // 编程式导航
  const navigate = useNavigate()

  const back = () => {
    navigate(-1)    // -1 表示后退一页，可以是多页
  }

  const toDetail = id => {
    navigate('detail', {
      replace: true,
      state: {
        id
      }
    })

  }
  const go = () => {
    navigate(1)    // 1 表示前进一页
  }
  return (
    <div>
      <button onClick={()=> back}>后退</button>
      <button onClick={()=> toDetail(1)}>展示详情</button>
      <button onClick={()=> go}>前进</button>
    </div>
  )
}

useParams()

useParams() hook 路由 params 传参时用于接收参数，返回参数对象。类似于 v5 中的 match.params

注：params 参数时传递的参数会显示在地址栏中，且需要传递的参数需要在路由配置中定义：

// params 路由配置参数示例：
<Route path={/demo/:id} element={<Demo />}></Route>

代码示例：

// 配置路由时提前预定义参数数量和每个参数的 key
<Route path="/foo/:id" element={<Demo />} />

// 接收参数：
import { useParams } from "react-router-dom";
export default function Demo() {
  const params = useParams();
  return (
    <div>
      <h1>{params.id}</h1>
    </div>
  );
}

useSearchParams()

useSearchParams() hook 路由 search 传参时用于接收参数，返回一个包含两个值的数组，内容分别为：当前 search 参数，更新 search 的函数。（和 useState() hook 很相似）

注：使用 search 传参时参数会显示在地址栏，但需要传递的参数不需要在路由配置中定义

代码示例：

import { useSearchParams } from "react-router-dom";

// 当前路径为 /Demo?id=1
function Demo() {
  // useSearchParams 返回一个包含两个参数的数组
  const [searchParams, setSearchParams] = useSearchParams();
  // 参数1.get(key) 用于获取 search 传递的对应 key 的值
  console.log(searchParams.get("id")); // 1
  
  return <div>Demo</div>;
}

useLocation()

useLocation() hook 用于获取当前 location 信息，也用于获取路由 state 形式传递的参数，对标 v5 中的路由组件 location 属性。返回一个对象，其中最为常用的是 pathname 和 state 。

注：state 传递的参数不会显示在地址栏，要传递的参数也无需在路由配置中定义，写法示例：

// 路由跳转时通过 state 形式携带参数示例：
<Link to='detail' state={
   
   {id: msg.id,title: msg.title, content: msg.content}}>{msg.title}</Link>

使用 useLocation() 接收参数代码示例：

// ...
// 使用 useLocation 获取路由参数以 state 方式传的参
import {useLocation} from 'react-router-dom'

export default function Detail() {
  // 接收 state 方式传递的参数
  const {state:{id, title, content}} = useLocation()
  return (
    <div>
      ...
    </div>
  )
}

以上就是 React Router v6 目前比较常用的组件和 API 的基本使用了，希望能帮助大家更快速的上手 Route6 ，更多关于 React Router 的知识请访问官网。