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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。