React路由可以实现页面间的切换。
传送门：英文文档
中文教程：
https://www.reactrouter.cn/docs/getting-started/tutorial

1.基础使用

react
需求：实现一个普通的底部导航切换

1.安装react-router

npm i react-router-dom@6

2.配置根组件app.js

import { React, lazy, Suspense } from "react";// 导入 Route, Routes 等核心组件
import { Route, Routes, BrowserRouter ,HashRouter } from "react-router-dom";
import Home from "./components/Home";
import About from "./components/About";
import User from "./components/User";
import PageNotFound from "./components/PageNotFound";
import Recommond from "./components/Recommand";
import JapenAnimate from "./components/JapenAnimate";
import ChineseAnimate from "./components/ChineseAnimate";
import NewAnimate from "./components/NewAnimate";function App() {return (<BrowserRouter><Routes><Route path="/" element={<Home />}></Route><Route path="/home" element={<Home />}><Route path="/home/" element={<Recommond />} /><Route path="/home/recommand" element={<Recommond />} /><Route path="/home/new-animate" element={<NewAnimate />} /><Route path="/home/japan-animate" element={<JapenAnimate />} /><Route path="/home/chinese-animate" element={<ChineseAnimate />} /></Route><Route path="/user" element={<User />} /><Route path="/about" element={<About />} /><Route path="*" element={<PageNotFound />} /></Routes></BrowserRouter>);
}export default App;

两种常用Router：BrowserRouter 、HashRouter
作用：包裹整个应用，只要在页面中写在最外层一次就行了。
BrowserRouter （推荐）
使用H5的history.pushState API实现 ，url显示效果（http://localhost:3000/home)
HashRouter
使用URL的哈希值实现，url显示效果(http://localhost:3000/#/home

配置路由语法：

    <Routes><Route path="/" element={<Home />} /><Route path="/user" element={<User />} /><Route path="/about" element={<About />} /></Routes>

Routes标签包裹着一个个路由，path对应路径，element对应导入的组件。

配置当无匹配项时，额外的404页面:

 <Route path="*" element={<PageNotFound />} />

4.配置Link链接（如果是导航的话推荐用NavLink）

// 导入NavLinkimport { NavLink } from "react-router-dom";-------------// 使用，to表示跳转链接<NavLink to='/home'>

5.配置导航激活状态

1） 设置active的css

Link 或者 NavLink都会被编译成a标签，并且激活时会自带一个active的类，简单的css，我们可以直接设置该a标签的active类属性。

2）通过activeStyle={} api属性设置激活时候的属性。

3）通过回调函数可以设置更复杂的操作（如导航激活图片的更换）

<NavLink to='/home'>{(isActive)=>{// isActive表示该Link是否处于激活状态}
</NavLink>

6. 基本的嵌套路由

用法参考下面

<Routes><Route path="/" element={<Home />}></Route><Route path="/home" element={<Home />}><Route path="/home/" element={<Recommond />} /><Route path="/home/recommand" element={<Recommond />} /><Route path="/home/new-animate" element={<NewAnimate />} /><Route path="/home/japan-animate" element={<JapenAnimate />} /><Route path="/home/chinese-animate" element={<ChineseAnimate />} /></Route><Route path="/user" element={<User />} /><Route path="/about" element={<About />} /><Route path="*" element={<PageNotFound />} /></Routes>

Outlet占位：
注意在使用时，需要配合 Outlet 标签对子路由进行占位，Outlet你可以决定放在父路由页面的任意位置。
语法

import { Outlet } from "react-router-dom";// 占位
<Outlet />

举个例子：

import TabBar from "../../common/TabBar";
import Tabs from "../Tabs";
import { Outlet } from "react-router-dom";
import SearchBar from "../SearchBar/index";
function Home() {return (<div><div><SearchBar /><Tabs /><Outlet /><TabBar /></div></div>);
}
export default Home;

我把Outlet放在tabs的下面，tabbar的上面，就是这种效果：

默认渲染一级路由 path=‘/’
默认渲染二级路由,去掉path，添加index属性。

 <Route index element={<Recommond />} />

2.进阶使用

编程式导航跳转

作用：通过js编程的方式进行路由页面跳转，比如从登录界面跳转到关于页。
语法说明：
1.导入useNavigate钩子函数
2.执行钩子函数得到跳转函数
3.执行跳转函数完成跳转

注意：如果在跳转时不想加历史记录，可以添加额外参数replace为true

import { useNavigate } from "react-router-dom";
------------------------const navigate = useNavigate();const goHome = () => {navigate("/home", { replace: true });};
------------------------------<button onClick={goHome}></button>

跳转携带参数：有时候不光需要跳转还需要传递参数。

1. searchParams
   传参

navigate('/about?id=1001')

取参

let [params] = useSearchParams()
let id = params.get('id')

2. params 传参
   传参

navigate('/about/1001')

取参

let params = useParams()
let id = params.id

抽离路由配置文件

编写渲染路由函数

1.懒加载路由

整合Link使用

更多好文章传送门：https://www.cnblogs.com/operate/p/16082907.html
https://www.jianshu.com/p/e50011ce67cc