React Router 6 的更新有哪些显著变化？

本文共计2225个文字，预计阅读时间需要9分钟。

React Router 6相较于5.x版本变化如下：- 移除了Switch和/组件。- 新增了Routes和等语法变化。- 改变组件声明方式：`component={About}`变为`element={About /}`。- 新增多个hook：useParams、useNavigate等。

React Router 6 变化

与React Router 5.x相比,6.x改变了什么

1. 内置组件的变化: 移除了<Switch />,新增了<Routes />等

2. 语法的变化: component={About}变成了element={<About />}

3. 新增多个hook: useParams,useNavigate,useMatch等

4. ......

Component BrowserRouter(相比V5没有变化)

BrowserRouter用于包裹整个应用

示例代码

import React from 'react'; import ReactDOM from 'react-dom/client'; // 引入react-router import {BrowserRouter} from "react-router-dom"; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <BrowserRouter> <App /> </BrowserRouter> ); HashRouter(相比V5没有变化)

作用与BrowserRouter一样,但是HashRouter修改的是地址栏的hash值

Route和Routes

1. V6版本移除了之前的Switch,引入了新的替代者Routes

2. Route和Routes配合使用,所有的路由Route都必须被包裹在<Routes></Routes>中

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

4. 路由组件的引入方式: <Route path="/home" element={<Home />}>

5. 重定向: <Route path='/' element={<Navigate to="/home" />}></Route>

6. <Route caseSensitive>树形用于指定: 匹配时是否区分大小写(默认为false)

7. <Route>也可以嵌套使用,并且可以配合useRoutes()配置路由

示例代码

<Routes> <Route to="/home" elements={<Home />}></Route> // 用于定义嵌套路由 <Route to="/about" elements={<About />}> <Route to="/news" element={<News />}></Route> <Route to="/messahes" element={<Messages />}></Route> </Route> // Route也可以不写element属性,用于展示嵌套的路由,对应的路由应该是/admin/user <Route to="/admin"> <Route to="/user" element={<User />}></Route> </Route> </Routes> Link和NavLink

作用: <NavLink>与<Link>组件相似,且可以实现导航的高亮功能

示例代码

// 自定义高亮效果并应用到NavLink上 <NavLink to="/home" className=(({isActive}) => { return isActive ? "base active" : "base" }) >Home</NavLink> Navigate *

作用: 只要Navigate组件被渲染,就会修改路径,切换视图

replace属性用于控制跳转模式(push或者replace,默认是push)

示例代码

import React, {useState} from 'react' import { Navigate } from 'react-router-dom' export default function Demo() { const [sum,setSum] = useState(1); return ( <div> <h1>This is Demo Component</h1> {/* 根据sum的值决定是否切换视图 */} { sum === 1 ? <h4>sum的值为{sum}</h4> : <Navigate to="/home" replace={true} /> } <button onClick={() => setSum(2)}>点击将sum变成2</button> </div> ) } Outlet

当<Route>产生嵌套的时候,渲染其对应的后续子路由

示例代码

// 根据路由表生成对应的路由规则 const element = useRoutes([ { path: "/about", element: <About /> }, { path: "/home", element: <Home />, children: [ { path: "news", element: <News /> }, { path: "messages", element: <Messages /> } ] }, { path: "/", element: <Navigate to="/about" /> } ]) // Home组件 import React from 'react' import { NavLink, Outlet } from 'react-router-dom' export default function Home() { return ( <div> <h2>Home组件内容</h2> <div> <ul className="nav nav-tabs"> <li> {/* 直接写二级路由名称(自己自动匹配当前组件的一级路由/home) */} <NavLink className="list-group-item" to="news">News</NavLink> </li> <li> {/*@ 如果给当前NavLink添加end属性,那么当选中子路由NavLink的时候,父级菜单的选项就不会高亮了 */} <NavLink className="list-group-item" end to="messages">Message</NavLink> </li> </ul> {/* 指定路由组件呈现的位置 */} <Outlet /> </div> </div> ) } Hooks useRoutes()

作用: 根据路由表,动态创建<Routes>和<Route>

示例代码

// 根据路由表生成对应的路由规则 // /src/routes/index.js export default [ { path: "/about", element: <About /> }, { path: "/home", element: <Home /> }, { path: "/", element: <Navigate to="/about" /> } ] // App.jsx import React from 'react' import {NavLink, useRoutes } from "react-router-dom"; import routes from "./routes" export default function App() { const elements = useRoutes(routes); // routes为路由表 return ( <div className='app'> <div className="row"> </div> <div className="row"> <div className="col-xs-2 col-xs-offset-2"> <div className="list-group"> {/* 路由链接 */} {/* isActive: true 是否被选中 */} {/* 如果isActive为true(被选中),展示高亮效果 */} <NavLink className="list-group-item" to="/about">About</NavLink> <NavLink className="list-group-item" to="/home">Home</NavLink> </div> </div> <div className="col-xs-6"> <div className="panel"> <div className="panel-body"> {/* 注册路由 */} {elements} </div> </div> </div> </div> </div> ) } useNavigate() *

作用: 返回一个函数用来实现编程式导航

示例代码:

import React from 'react' import { useNavigate } from 'react-router-dom'; export default function Detail() { const navigate = useNavigate(); const showClick = () => { navigate("/about", { replace: false, state: {name:"Tom",age:20} }); // 二级及以上的路由路径前面不需要添加'/' /* navigate("detail",{ replace: false, state: {} }) */ } return ( <div> <button onClick={showClick}>点我跳转</button> </div> ) } useParams()

作用: 接受当前匹配路由的params参数,类似于5.x中的match.params

示例代码:

import React from 'react' //@ useParams 获取路由跳转带过来的参数 import { useMatch, useParams } from 'react-router-dom' export default function Detail() { //@ params // 路径设置为path: "detail/:id/:title/:content" const { id } = useParams(); const path = useMatch("/home/messages/detail/:id"); console.log(path); return ( <div> // 展示传过来的参数id <p>My id is {id}</p> </div> ) } useSearchParams()

作用: 用于读取和修改当前位置的URL中的查询字符串

返回一个包含两个值的数组,内容分别为: 当前的search参数,更新的search参数

示例代码:

import React from 'react' import { useSearchParams, useLocation } from 'react-router-dom'; /** * @ params useMatch useParams * @ query useSearchParams useLocation * @ state useLocation */ export default function Detail() { // @ query // Route路径写为 to={`detail?id=${item.id}&title=${item.title}&content=${item.content}`} let [search] = useSearchParams(); // let [search,setSearch] = useSearchParams(); let id = search.get("id"); let title = search.get("title"); let content = search.get("content"); console.log(useLocation()); return ( <div> {id}-{title}-{content} </div> ) } useLocation()

作用: 获取当前lication信息,对标5.x中的路由组件的location属性

示例代码:

<Link to="detail" state={{ id: item.id, title: item.title, content: item.content }} > {item.title} </Link> > // Detail.jsx import React from 'react' import { useLocation, useNavigate } from 'react-router-dom'; /** * @ params useMatch useParams * @ query useSearchParams useLocation * @ state useLocation */ export default function Detail() { //@ state // 连续解构 const {state:{id,title,content}} = useLocation(); const navigate = useNavigate(); return ( <div> {id}-{title}-{content} </div> ) } useMatch()

作用: 返回当前匹配信息,对标5.x中的路由组件的match属性

示例代码

<Route path="detail/:id/:title/:content" element={<Detail />} /> <NavLink to="detail/001/message/detail">登录</NavLink> import React from 'react' //@ useParams 获取路由跳转带过来的参数 import { useParams } from 'react-router-dom' export default function Detail() { const path = useMatch("/home/messages/detail/:id"); console.log(path); return ( <div> // 展示传过来的参数id <p>My id is {id}</p> </div> ) } /* message对象内容如下: { params: {id: '002', title: 'Message002', content: '汗滴禾下土'} pathname: "/home/messages/detail/002/Message002/%E6%B1%97%E6%BB%B4%E7%A6%BE%E4%B8%8B%E5%9C%9F" pathnameBase: "/home/messages/detail/002/Message002/%E6%B1%97%E6%BB%B4%E7%A6%BE%E4%B8%8B%E5%9C%9F" pattern: {path: '/home/messages/detail/:id/:title/:content', caseSensitive: false, end: true} [[Prototype]]: Object } */ useInRouterContext()

作用: 如果组件在<Router>的上下文中呈现,则useInRouterContext钩子返回true,否则返回false

当当前组件脱离了路由器的管理,就会返回false

useNavigationType()

作用: 返回当前的导航类型(用户是如何来到当前页面的)

返回值: POP,PUSH,REPLACE

备注: POP是指在浏览器中直接打开了这个路由组件(直接打开or刷新之后)

示例代码

import {useNavigationType} from "react-router-dom"; ... console.log(useNavigationType()); // 输出POP/PUSH/REPLACE useOutlet()

作用: 用来呈现当前组件中渲染的嵌套路由

示例代码

import {useOutlet} from "react-router-dom"; ... const result = useOutlet(); console.log(result); // 如果嵌套路由没有挂载,则result的值为null // 如果嵌套路由已经挂载,则展示嵌套的路由对象 useReslovePath()

作用: 给定一个URL值,解析其中的path,search,hash值

示例代码

import {useReslovePath} from "react-router-dom" ... console.log(useResolvedPath("/user?id=001&name=tom#que")); // {pathname: '/user', search: '?id=001&name=tom', hash: '#que'}