React Router6 的变化
React Router 6
变化
与React Router 5.x相比,6.x改变了什么
-
内置组件的变化: 移除了
<Switch />
,新增了<Routes />
等 -
语法的变化:
component={About}
变成了element={<About />}
-
新增多个hook:
useParams
,useNavigate
,useMatch
等 -
......
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
-
V6版本移除了之前的
Switch
,引入了新的替代者Routes
-
Route
和Routes
配合使用,所有的路由Route
都必须被包裹在<Routes></Routes>
中 -
Route
相当于一个if语句,如果其路径与当前的URL匹配,则呈现相对应的组件 -
路由组件的引入方式:
<Route path="/home" element={<Home />}>
-
重定向:
<Route path='/' element={<Navigate to="/home" />}></Route>
-
<Route caseSensitive>
树形用于指定: 匹配时是否区分大小写(默认为false) -
<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'}