当前位置: 首页 > 工具软件 > React Router > 使用案例 >

React Router 6 快速上手

饶高雅
2023-12-01

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 的知识请访问官网

 类似资料: