1.概述
React Router 以三个不同的包发布到 npm 上,它们分别为:
react-router: 路由的核心库,提供了很多的:组件、钩子。
react-router-dom: 包含react-router所有内容,并添加一些专门用于 DOM 的组件,例如 等 。
react-router-native: 包括react-router所有内容,并添加一些专门用于ReactNative的API,例如:等。
与React Router 5.x 版本相比,改变了什么?
内置组件的变化:移除
语法的变化:component={About} 变为 element={}等。
新增多个hook:useParams、useNavigate、useMatch等。
官方明确推荐函数式组件了!!!
…
2.Component
1. < BrowserRouter>
说明:< BrowserRouter> 用于包裹整个应用。
示例代码:
import React from "react";
import ReactDOM from "react-dom";
import {
BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
{
/* 整体结构(通常为App组件) */}
</BrowserRouter>,root
);
2. < HashRouter>
说明:作用与< BrowserRouter>一样,但修改的是地址栏的hash值。
备注:6.x版本中< HashRouter>、< BrowserRouter> 的用法与 5.x 相同。
3. < Routes/> 与 < Route/>
v6版本中移出了先前的
和 要配合使用,且必须要用包裹。
相当于一个 if 语句,如果其路径与当前 URL 匹配,则呈现其对应的组件。
属性用于指定:匹配时是否区分大小写(默认为 false)。
当URL发生变化时, 都会查看其所有子 元素以找到最佳匹配并呈现组件 。
也可以嵌套使用,且可配合useRoutes()配置 “路由表” ,但需要通过 组件来渲染其子路由。
示例代码:
<Routes>
/*path属性用于定义路径,element属性用于定义当前路径所对应的组件*/
<Route path="/login" element={
<Login />}></Route>
/*用于定义嵌套路由,home是一级路由,对应的路径/home*/
<Route path="home" element={
<Home />}>
/*test1 和 test2 是二级路由,对应的路径是/home/test1 或 /home/test2*/
<Route path="test1" element={
<Test/>}></Route>
<Route path="test2" element={
<Test2/>}></Route>
</Route>
//Route也可以不写element属性, 这时就是用于展示嵌套的路由 .所对应的路径是/users/xxx
<Route path="users">
<Route path="xxx" element={
<Demo />} />
</Route>
</Routes>
4. < Link>
作用: 修改URL,且不发送网络请求(路由链接)。
注意: 外侧需要用或包裹。
示例代码:
import {
Link } from "react-router-dom";
function Test() {
return (
<div>
<Link to="/路径">按钮</Link>
</div>
);
}
- < NavLink>
作用: 与组件类似,且可实现导航的“高亮”效果。
示例代码:
// 注意: NavLink默认类名是active,下面是指定自定义的class
//自定义样式
<NavLink
to="login"
className={
(