ReactRouter6.x版本使用

React Router 6.0 &＃xff1a;https://reactrouter.com/en/main/start/overview

1. 包大小的不同 V5 大小在20.8k左右&＃xff0c;压缩后在7.3k左右&＃xff1b;V6 大小在10.8k左右&＃xff0c;压缩后在3.8k左右
2. 内置组件的变化&＃xff1a;移除 &＃xff0c;新增 等。
3. 语法的变化&＃xff1a;component&＃61;{About} 变为 element&＃61;{}等。
4. 新增多个hook&＃xff1a;useParams、useNavigate、useMatch等。
5. 官方明确推荐使用函数式组件了。

yarn add react-router-dom&＃64;6.4.5

npm install react-router-dom&＃64;6.4.5

1. 路由模式 BrowserRouter 和 HashRouter

6.x版本中、 的用法与 5.x 相同。

https://blog.csdn.net/Jie_1997/article/details/126740893

2. Routes 与 Route

1. v6 版本中移除了先前的&＃xff0c;引入了新的替代者&＃xff1a;。
2. 和 要配合使用&＃xff0c;且必须要用包裹。
3. 相当于一个 if 语句&＃xff0c;如果其路径与当前 URL 匹配&＃xff0c;则呈现其对应的组件。
4. 属性用于指定&＃xff1a;匹配时是否区分大小写&＃xff08;默认为 false&＃xff09;。
5. 当URL发生变化时&＃xff0c; 都会查看其所有子 元素以找到最佳匹配并呈现组件 。
6. 也可以嵌套使用&＃xff0c;且可配合useRoutes()配置 “路由表” &＃xff0c;但需要通过 组件来渲染其子路由。

<Routes>
{/* path属性用于定义路径&＃xff0c;element属性用于定义当前路径所对应的组件 */}
<Route path&＃61;"/login" element&＃61;{ />}>Route>
{/* 用于定义嵌套路由&＃xff0c;home是一级路由&＃xff0c;对应的路径/home */}
<Route path&＃61;"home" element&＃61;{ />}>
{/* page1 和 page2 是二级路由,对应的路径是/home/page1 或 /home/page2 */}
<Route path&＃61;"page1" element&＃61;{ />}>Route>
<Route path&＃61;"page2" element&＃61;{ />}>Route>
Route>
{/*
Route也可以不写element属性, 表示用于展示嵌套的路由
./user 对应的路径是/users/user
/user 对应根路径/user
user 与./user意思相同&＃xff0c;对应根路径/users/user
*/}
<Route path&＃61;"users">
<Route path&＃61;"user" element&＃61;{ />} />
Route>
Routes>


3. Link

1. 用于修改URL&＃xff0c;且不发送网络请求&＃xff08;路由链接&＃xff09;。
2. 使用时&＃xff0c;外侧需要用或包裹。

import React from &＃39;react&＃39;
export default function Demo() {
return (
<div>
<Link to&＃61;"/路径">按钮</Link>
</div>
)
}


4. NavLink

1. 与组件类似&＃xff0c;且可实现导航的“高亮”效果
2. NavLink 默认类名是 active
3. 当NavLink上添加了end属性后&＃xff0c;若路由的子组件匹配成功&＃xff0c;则路由的导航没有高亮效果。

{/* 自定义类名 */}
<NavLink
to&＃61;"login"
className&＃61;{({ isActive }) &＃61;> {
console.log(isActive);
return isActive ? "class1" : "class2";
}}
>
login
</NavLink>


{/* 若Home的子组件匹配成功&＃xff0c;则Home的导航没有高亮效果 */}
<NavLink to&＃61;"home" end >homeNavLink>


5. Navigate

1. 只要组件被渲染&＃xff0c;就会修改路径&＃xff0c;切换视图
2. replace属性用于控制跳转模式&＃xff08;push 或 replace&＃xff0c;默认是push&＃xff09;

import React, { useState } from "react";
import { Navigate } from "react-router-dom";
export default function Home() {
const [count, setCount] &＃61; useState(1);
return (
<div>
<h3>Home组件</h3>
{/* 根据count的值决定是否切换视图 */}
{count &＃61;&＃61;&＃61; 1 ? (
<h4>count的值为{count}</h4>
) : (
<Navigate to&＃61;"/about" replace&＃61;{true} />
)}
{/* 修改count值 */}
<button onClick&＃61;{() &＃61;> setCount(2)}>修改count值为2</button>
</div>
);
}


6. Outlet

当产生路由嵌套时&＃xff0c;渲染其对应的后续子路由。

import React from "react";
import { NavLink, Outlet } from "react-router-dom";
export default function Home() {
return (
<div>
<h2>Home组件内容</h2>
<div>
{/* 子路由 */}
<ul>
<li>
<NavLink replace to&＃61;"page1">page1</NavLink>
</li>
<li>
<NavLink to&＃61;"page2">page2</NavLink>
</li>
</ul>
{/* 指定子路由组件呈现的位置 */}
<Outlet />
</div>
</div>
);
}

四. Hooks

1. useRoutes() —— 路由表

根据路由表&＃xff0c;动态创建和。

1. src 文件夹下创建 routes 文件夹&＃xff0c;用于存放路由文件
2. src/routes 文件夹下创建 index.js 文件&＃xff0c;用于配置路由

   //路由表配置&＃xff1a;src/routes/index.js
import About from "../pages/About";
import Home from "../pages/Home";
import { Navigate } from "react-router-dom";
export default [
{
path: "/about",
element: <About />,
},
{
path: "/home",
element: <Home />,
},
{
path: "/",
element: <Navigate to&＃61;"/about" />,
},
];


3. App.js 文件中引入使用

   import React from "react";
import { NavLink, useRoutes } from "react-router-dom";
import routes from "./routes";
export default function App() {
//根据路由表生成对应的路由规则
const element &＃61; useRoutes(routes);
return (
<div className&＃61;"app">
<div className&＃61;"menu">
{/* 路由链接 */}
<NavLink to&＃61;"/about">About</NavLink>
<NavLink to&＃61;"/home">Home</NavLink>
</div>
<div className&＃61;"body">
{/* 注册路由 */}
{element}
</div>
</div>
);
}


2. 路由传参

传递参数id&＃xff0c;参数值为001

2.1 useParams() —— params传参

• 路由设置

  // 路由表形式
{
path: "detail/:id",
element: <Detail />,
},


  // 标签形式
<Routes>
<Route path&＃61;"detail/:id" element&＃61;{<Detail />} />
</Routes>


• 路由链接传参

  <Link to&＃61;{&＃96;detail/001&＃96;}>传参Link>


• 接收参数

  import React from "react";
import { useParams } from "react-router-dom";
export default function Detail() {
// 接收参数
const { id, title, content } &＃61; useParams();
return <div>Detail</div>;
}


2.2 useSearchParams() —— search传参&＃xff08;query传参&＃xff09;

• 路由设置

  // 路由表形式
{
path: "detail",
element: <Detail />,
},


  // 标签形式
<Routes>
<Route path&＃61;"detail" element&＃61;{<Detail />} />
</Routes>


• 路由链接传参

  传参Link>


• 接收参数

  import React from "react";
import { useSearchParams } from "react-router-dom";
export default function Detail() {
// 返回一个包含两个值的数组&＃xff0c;内容分别为&＃xff1a;当前的seaech参数、更新search的函数
const [search, setSearch] &＃61; useSearchParams();
// 取出对应参数
const id &＃61; search.get("id");
return <div>Detail</div>;
}


2.3 useLocation() —— state传参

• 路由设置

  // 路由表形式
{
path: "detail",
element: <Detail />,
},


  // 标签形式
<Routes>
<Route path&＃61;"detail" element&＃61;{<Detail />} />
</Routes>


• 路由链接传参

  <Link
to&＃61;"detail"
state&＃61;{{
id: "001",
}}
>
传参
Link>


• 接收参数

  import React from "react";
import { useLocation } from "react-router-dom";
export default function Detail() {
// 接收参数
const { state } &＃61; useLocation();
return <div>Detail</div>;
}


3. useNavigate() —— 编程式路由导航

1. 指定具体的路径

   import React from "react";
import { useNavigate } from "react-router-dom";
export default function Demo() {
const navigate &＃61; useNavigate();
const handle &＃61; () &＃61;> {
navigate(
"detail", //指定路径
{
replace: false, //是否为 replace 模式
state: {
id: "001", //state 传参
},
}
);
};
return (
<div>
<button onClick&＃61;{handle}>跳转</button>
</div>
);
}


2. 传入数值&＃xff0c;前进或后退

   import React from "react";
import { useNavigate } from "react-router-dom";
export default function Demo() {
const navigate &＃61; useNavigate();
const handle &＃61; () &＃61;> {
navigate(-1);
// navigate(1); //前进
};
return (
<div>
<button onClick&＃61;{handle}>后退</button>
</div>
);
}


4. useInRouterContext() —— 判断组件是否在 Router的上下文中呈现

如果组件在 的上下文中呈现&＃xff0c;则 useInRouterContext 钩子返回 true&＃xff0c;否则返回 false。

import React from "react";
import { useInRouterContext } from "react-router-dom";
export default function Demo() {
// 打印判断
console.log(useInRouterContext());
return <div>Demo</div>;
}


5. useNavigationType() —— 返回当前的导航类型

1. 返回当前的导航类型&＃xff08;用户是如何来到当前页面的&＃xff09;
2. 返回值&＃xff1a;POP、PUSH、REPLACE
3. POP是指在浏览器中直接打开了这个路由组件&＃xff08;刷新页面&＃xff09;

import React from "react";
import { useNavigationType } from "react-router-dom";
export default function Dome() {
// 打印查看
console.log(useNavigationType());
return <div>Dome</div>;
}


6. useOutlet() —— 呈现当前组件中渲染的嵌套路由

import React from "react";
import { NavLink, Outlet, useOutlet } from "react-router-dom";
export default function Home() {
/**
* useOutlet() 当前组件中渲染的嵌套路由
* 如果嵌套路由没有挂载,则result为null
* 如果嵌套路由已经挂载,则展示嵌套的路由对象
*/
console.log(useOutlet());
return (
<div>
<h2>Home组件内容</h2>
<div>
{/* 子路由 */}
<ul>
<li>
<NavLink replace to&＃61;"page1">page1</NavLink>
</li>
<li>
<NavLink to&＃61;"page2">page2</NavLink>
</li>
</ul>
{/* 指定子路由组件呈现的位置 */}
<Outlet />
</div>
</div>
);
}


7. useResolvedPath() —— 解析URL值

import React from "react";
import { useResolvedPath } from "react-router-dom";
export default function Demo() {
// 解析其中的&＃xff1a;path、search、hash值
console.log(useResolvedPath("/user?id&＃61;001&name&＃61;tom#qwe"));
return <div>Demo</div>;
}