React Router 6 快速上手

65 阅读 0 评论 43 点赞

我是靠谱客的博主干净招牌，最近开发中收集的这篇文章主要介绍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 的知识请访问官网。

最后

以上就是干净招牌为你收集整理的React Router 6 快速上手的全部内容，希望文章能够帮你解决React Router 6 快速上手所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：React
浏览次数：65 次浏览
发布日期：2023-12-27 04:10:25
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_ocfx_14__23_c0.html

React Router 6 快速上手

概述

NPM 安装

Component

<BrowserRouter>与<HashRouter>

<Routes>与<Route>

<Link>与<NavLink>

<Navigate>

<Outlet>

hooks

useRoutes()

useNavigate()

useParams()

useSearchParams()

useLocation()

最后

评论列表共有 0 条评论

发表评论取消回复

React Router 6 快速上手

概述

NPM 安装

Component

<BrowserRouter>与<HashRouter>

<Routes>与<Route>

<Link>与<NavLink>

<Navigate>

<Outlet>

hooks

useRoutes()

useNavigate()

useParams()

useSearchParams()

useLocation()

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复