React07-路由管理器react-router-dom（v6）
react-router 是一个流行的用于 React 应用程序路由的库。它使我们能够轻松定义应用程序的路由，并将它们映射到特定的组件，这样可以很容易地创建复杂的单页面应用，并管理应用程序的不同视图。
react-router 是基于 React 构建的，因此与其他 React 库和工具集成得很好。它在许多 React 应用程序中广泛使用，并被认为是 React 中最佳实践的路由。
一、react-router-dom安装和简介
1. react-router-dom安装
使用 npm 或 yarn 安装 react-router-dom。
npm install --save react-router-dom
yarn add react-router-dom
2. react-router-dom 简介
react-router-dom 是 react-router 的一种实现方案，主要应用于网页端应用，它提供了一些常用的组件进行路由管理。
(1) Router 类组件
- BrowserRouter：history 模式下的路由。
- HashRouter：hash 模式下的路由。
(2) Route 组件
Route 是一个路由配置组件。
(3) Link 组件
Link 类似于 a 标签，可以用于路由跳转。
(4) useNavigate Hook
useNavigate 是一个钩子函数，可以用于路由跳转。
二、react-router-dom 基本使用
1. 引入 react-router-dom
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';这里的 BrowserRouter as Router 相当于给 BrowserRouter 起了一个别名叫 Router。Routes 组件用于包裹 Route 组件，Route 组件的父组件必须是 Routes。
2. 简单使用
使用 BrowserRouter 组件包裹 Routes 组件，再用 Routes 组件包裹 Route 组件，在 Route 组件中定义路由信息，就实现了一个简单的 react-router 场景。
Route 组件有 path 和 element 两个属性，path 属性代表路由路径，element 属性代表要渲染的组件。
index.js
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter as Router} from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
);app.js
import './App.css';
import { Routes, Route} from "react-router-dom";
import Home from "./views/Home";
import About from "./views/About";
import Error from "./views/Error";
function App() {
return (
}/>
}/>
}/>
);
}
export default App;在上面的案例中，我们定义了一个根路由，指向 Home 页面。还定义一个指定路径路由 /about，指向 About 页面，表示当我们在浏览器地址栏中的页面地址后加上 /about 时，会跳转到 About 页面。
又定义了一个通用路由，指向 Error 页面，path="*" 表示如果浏览器地址栏中的页面地址不是以上定义的2种路由（即其他路由地址）时，就会跳转到 Error 页面。
注意：BrowserRouter 组件最好放在最顶层所有组件之外，这样能确保内部组件使用 Link 做路由跳转时不出错。
3. 路由跳转
跳转路由时，如果路由路径是 / 开头的是绝对路由，否则是相对路由，即相对于当前 URL进行改变。
(1) Link 组件
Link 组件只能在 Router 组件的内部使用，to 属性代表要跳转的路由地址。
import { Link } from "react-router-dom";To About(2) NavLink 组件
NavLink 组件和 Link 组件的功能是一致的，区别在于 NavLink 组件可以判断其 to 属性是否是当前匹配到的路由。
NavLink组件的 style 属性或 className 属性可以接收一个函数，函数接收一个含有 isActive 字段的对象为参数，可根据该参数调整样式。
import { Link } from "react-router-dom"; ( {color: isActive ? "red" : "black"} )}>To About (3) useNavigate Hook
使用 useNavigate 钩子函数，可以在 js 代码中实现路由跳转。
useNavigate 必须在 Route 的上下文中使用，即必须包裹在 Router 标签内。
import { useNavigate } from "react-router-dom";4. 路由参数
(1) 路径参数（动态路由匹配）
在 Routes 组件内定义路由。对于动态路由，使用冒号（:）来指定动态部分。例如，要定义一个动态用户路由，可以：
App.js
这里的 :userId 是动态部分，可以匹配任何放在 /user/ 后面的路径，比如 /user/123。
在路由的目标组件中，可以使用 useParams 钩子来访问动态参数。例如，在 User 组件中，可以这样获取 userId：
User.js
mport { useParams } from 'react-router-dom';
function User {
let { userId } = useParams();
console.log(userId); // 123
// 使用 userId 作为你的逻辑的一部分
}
export default User;上述案例中，访问 /user/123 能正确获取到 userId 为123。
(2) 查询参数
查询参数不需要在路由中定义，可以使用 useSearchParams 钩子函数来处理路径中的查询参数。
查询参数位于 URL 中，用于提供额外信息以便服务器能够更具体地处理请求。它们通常出现在网页地址（URL）的末尾，并且遵循一定的格式。
在 URL 中，查询参数是通过问号（?）与网址的其它部分分隔开的，并且可以包含一个或多个键值对。每个键值对都由一个键（key）和一个值（value）组成，用等号（=）连接。如果有多个查询参数，它们之间通常用符号与（&）分隔。
例如，在 URL https://example.com/page?param1=value1¶m2=value2 中， param1=value1 和 param2=value2 是查询参数，它们提供了额外的信息给服务器。
useSearchParams Hook 返回当前组件获取到的查询参数对象及修改这个对象的方法，使用方法和 useState Hook 类似。
在使用 setSearchParams 方法时，必须传入所有查询参数，否则会覆盖已有查询参数。
import { useSearchParams } from 'react-router-dom';
function User() {
// 使用 useSearchParams 钩子
const [searchParams, setSearchParams] = useSearchParams();
// 获取查询参数
const userId = searchParams.get('userId');
// 设置查询参数
const setUserId = (newUserId) => {
setSearchParams({ userId: newUserId });
};
// 渲染组件
return (
当前的 userId 是：{userId}
);
}
export default User;上述案例中，访问 /user?userId=123456 时，效果如下：
点击按钮后，userId 变为 123，符合预期。
(3) 状态参数
react-router 对 window.location 进行了包装，状态参数就位于包装后的 location 对象的 state 属性中。下面为包装后的 location 对象的属性：
| pathname | 主机名之后的 URL 地址 |
| search | 查询参数 |
| hash | 哈希值，用于确定页面滚动的具体位置 |
| state | 对于 window.history.state 的包装 |
| key | 每个 location 对象拥有一个唯一的 key |
state 不显示在页面上，不会引起页面刷新，可用于记录用户的跳转详情或在跳转时携带信息，可以用在 Link 组件或 navigate 方法中使用状态参数。
{/* Link 中使用状态参数 */}
To About
{/* useNavigate 中使用状态参数 */}
在目标组件中，使用 useLocation 来获取封装后的 loaction 对象，进而获取状态参数。
const location = useLocation();
console.log(location.state);5. 路由重定向
当在某个路径 /a ，要重定向到路径 /b 时，可以通过 Navigate 组件进行重定向到其他路径。
import { Navigate } from “react-router-dom”;
function A() {
return 三、react-router-dom 进阶使用
1. 嵌套路由
嵌套路由是前端开发中用于组织和管理路由的一种技术，特别适用于构建具有层次结构的页面和应用程序。
在 Route 组件内定义 Route 组件实现嵌套路由，在父组件中使用 Outlet 组件作为子组件的占位符（显示匹配到的子组件）。
在嵌套路由中，如果 URL 仅匹配了父级 URL，则 Outlet 组件中会显示带有 index 属性的子路由，这个子路由称为默认路由。
例3-1：根据用户 id 显示用户详细信息
App.js
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './views/Home';
import Users from './views/Users';
import UserList from "./views/UserList";
import UserDetail from "./views/UserDetail";
function App() {
return (
);
}
export default App;
Users.js
import { Link, Outlet } from "react-router-dom";
function Users() {
return (
Users
UserList.js
import { Link } from "react-router-dom";
function UserList() {
const users = [
{id: "1", name: 'John'},
{id: "2", name: 'Jane'},
{id: "3", name: 'Mary'},
];
return (
User List
{users.map((user) => (
-
{user.name}
))}
);
}
export default UserList;UserDetail.js
import { useParams } from 'react-router-dom';
function UserDetail() {
const { userId } = useParams();
const users = [
{id: "1", name: 'John'},
{id: "2", name: 'Jane'},
{id: "3", name: 'Mary'},
];
return (
User Detail
id：{userId}
name：{users.find((user) => user.id === userId).name}
)
}
export default UserDetail;上述案例中，在根组件 App 中定义了一组嵌套路由，一级路由为 / 和 users。又在 users 中嵌套了默认路由和动态路由 :userid。
在这个嵌套路由中，Users 组件为父组件，UserList 和 UserDetail 组件为子组件。在 Users 组件中使用了 Outlet 组件，作为匹配到的子组件的占位符。可以使用在路由的任何层级。当访问 /users 时，这里触发默认路由显示 UserList 组件。当访问 /users/2 时，会显示 UserDetail 组件。
访问 /users：
访问 /users/2：
2. 多组路由
多组路由指的是在单个应用中设置多个独立的路由组，可以在不同部分的应用中实现独立的路由逻辑，增加了路由结构的灵活性和模块化。
在 react-router-dom 中，可以通过在不同的组件中定义多个 Routes 组件来实现多组路由。
例3-2 管理系统案例
App.js
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import MainSite from './views/MainSite';
import AdminPanel from './views/AdminPanel';
function App() {
return (
);
}
export default App;MainSite.js
import { Routes, Route, Link } from 'react-router-dom';
import Home from './Home';
import About from './About';
function MainSite() {
return (
);
}
export default MainSite;AdminPanel.js
import { Routes, Route, Link } from 'react-router-dom';
import Dashboard from './Dashboard';
import Users from './Users';
function AdminPanel() {
return (
);
}
export default AdminPanel;上述案例构建了一个具有两个独立路由组的应用，这两个路由组分别是主站（MainSite 组件）和管理面板（AdminPanel 组件）。MainSite 组件包含了应用的主要页面，如首页（Home）和关于页面（About）；AdminPanel 组件是应用的管理面板，包含了仪表盘（Dashboard）和用户管理（Users） 界面。
App.js 中定义了应用的顶级路由结构，使用 Routes 来定义两个主要路由路径：* 和 /admin/*。每个路径指向对应的 MainSite 和 AdminPanel 组件。* 路径指向 MainSite 组件，该组件处理与主站相关的子路由。/admin/* 路径指向 AdminPanel 组件，该组件处理与管理面板相关的子路由。
当访问 / 时，展示 MainSite 组件和 Home 组件；访问 /about，展示 MainSite 组件和 About 组件；访问 /admin，展示 AdminPanel 组件；访问 /admin/dashboard，展示 AdminPanel 组件和 Dashboard 组件。
3. 布局路由
布局路由是一种组织和管理路由的方式，它允许开发者将路由与其对应的布局分开管理。这在复杂的应用中特别有用，因为它可以帮助保持代码的清晰和模块化。
布局路由是指一种模式，其中一组路由共享相同的布局组件。这意味着这些路由的所有页面都将有相同的外观和感觉，例如共享的头部和底部导航栏。布局组件负责渲染这些共享元素，而特定的子路由则负责渲染页面的主要内容。
例3-3 升级版管理系统案例
App.js
同案例3-2。
MainSite.js
import React from 'react';
import {Routes, Route, Link} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Header from './Header';
import Footer from './Footer';
import Error from "./Error";
function MainSite() {
return (
);
}
export default MainSite;AdminPanel.js
import React from 'react';
import {Routes, Route, Link} from 'react-router-dom';
import Dashboard from './Dashboard';
import Users from "./Users";
import AdminHeader from './AdminHeader';
import AdminFooter from './AdminFooter';
import Error from "./Error";
function AdminPanel() {
return (
上述案例中，我们在 MainSite 和 AdminPanel 中加入了 Header 和 Footer 布局组件，同时添加了一个用于处理所有未匹配路由的 Error 组件。