一、路由模块的安装 

npm install react-router-dom

// 目前版本： v6.3

官方案例：

二、路由各组件 

1. BrowserRouter / HashRouter 相当于容器（类似router-view），用于指定路由的模式

BrowserRouter为history模式

HashRouter为hash模式

注意：BrowserRouter组件最好放在最顶层所有组件之外，这样能确保内部组件使用Link做路由跳转时不出错

如下：

2. Route 定义具体的路由

<Route path="/expenses" element={<Home/>} />

path 为路由名 ， element 为对应的组件

注：element 的值 必须 写成标签的形式

3. 老版本V5 中的作用路由

示例：

如上代码：

在当用户输入/product时，将会匹配到两个路由，/ 及 /product ；则会显示两个组件 ；

原因是老版本路由在匹配时，是进行模糊匹配

解决方案：

步骤1：使用Switch让路由只能匹配一个； 注意顺序问题，路由先从上向下进行匹配

步骤2：使用exact关键字，让路由进行精准匹配

 <Route path="/" exact component={Home} />

加上以上关键字，路由将会精准匹配，只会匹配，path为”/" 的路由

4. V6中的 组件Routes

v6 中 Switch 名称变为 Routes ， 且Route 标签必须包含在Routes标签里，会不然报错

也就是说，路由只能匹配到一个，不会在出现多个路由匹配的情况

5. v6 中，exact 属性不再需要

v6 内部算法改变，不再需要加exact实现精确匹配路由，默认就是匹配完整路径。

如果需要旧的行为(模糊匹配)，路径后加/*

<Route path="/products/*" element={<Products />} />

<Route path="/products/:productId" element={<ProductDetail />} />

测试： /prodcuts 显示

/products/4 显示

/products/haha 显示

/products/haha/hehe 显示

结论：看第6点：React Router 能够自动找出最优匹配路径 ，顺序不重要

若：path属性取值为*时，可以匹配任何（非空）路径，同时该匹配拥有最低的优先级。可以用于设置404页面。

6. v6 中，Route 先后顺序不再重要，React Router 能够自动找出最优匹配路径

7. v6 保留Link，NavLink

Link,NavLink 类似与a标准，区别NavLink可以设置高亮样式

<Link to="/home">首页</Link>

NavLink的使用，及激活状态的样式设置

V5老版本，activeClassName设置，或activeStyle

V6新版本，activeClassName 与 activeStyle属性被移除

可以直接在的className和style中使用一个函数来设置激活状态的样式。

方法：通过箭头函数接收到isActive参数值，通过isActive的值来设置

通过className

通过style

fontWeight: "bold" 不管是否激活，都会有； 因为没有判断

8. Navigate组件

<Route path="/" element ={<Navigate replace to="/home" />} />

<Navigate replace to="" />是对旧的 Redirect 的完整取代。

replace 属性也可以省略，不过行为由 replace 改为 push

replace vs push

        this.props.history.push('router地址')

        push: a-b-c，可以回到上一级

        push跳转会形成history，可返回到上一层。

        this.props.history.replace('router地址')

        replace: a-b-c 回不到上一级 适用于登录后，不需要重新回到登页面

        replace跳转不会形成history，不可返回到上一层。

        结论： push有历史记录，replace没有历史记录

9. V6中嵌套路由改为相对路径

嵌套路由必须放在 中，且使用相对路径，不再像 v5 那样必须提供完整路径，因此路径变短。

上面的访问路径为 /about/address , /about/information, /about/joinus

10. 使用Outlet组件

此组件是一个占位符，告诉 React Router 嵌套的内容应该放到哪里。

11. 使用index 指定默认路由, 或者path为空

<Route path='/about' element={<About />}>
    <Route index element={<Address />} />
    <Route path='address' element={<Address />}></Route>
    <Route path='information' element={<Information />}></Route>
    <Route path='joinus' element={<Join />}></Route>
</Route> 

或者

设置path为空，来指定默认路由

12. useRoutes 声明式的路由配置方式

声明式路由中，不能写index, 可以让path: "" , 来实现显示默认组件;

useRoutes函数，会返回已经渲染好的路由元素

13. v6 用useNavigate实现编程式导航，useHistory被移除

如果要重定向:

navigate("/welcome",{replace:true});

除此之外，还可以使用navigate(-1)后退到前一页，使用navigate(-2)后退到前一页的前一页，navigate(1)前向导航，

注：V5版本中的编程式路由导航 this.props.history.replace() 与  this.props.history.push();

在V6中useNavigate 替代

详细版本：

// v6版本编程导航使用 useNavigate (以下为引入代码)

1.push跳转+携带params参数

navigate(`/b/child1/${id}/${title}`);

2.push跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`);

3.push跳转+携带state参数

navigate("/b/child2", { state: { id, title }});

4.replace跳转+携带params参数

navigate(`/b/child1/${id}/${title}`,{replace: true});

5.replace跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`,{replace: true});

6.replace跳转+携带state参数

navigate("/b/child2", { state: { id, title },replace: true});

14. useSearch 获取路由参数的方法

在Route组件中的path属性中定义路径参数

在组件内通过useParams hook访问路径参数

在以前版本中，组件的props会包含一个match对象，在其中可以取到路径参数。但在最新的6.x版本中，无法从props获取参数。

并且，针对类组件的withRouter高阶组件已被移除。

因此对于类组件来说，使用参数有两种兼容方法：

1. 将类组件改写为函数组件传递

2. 写一个HOC来包裹类组件，用useParams获取参数后通过props传入原本的类组件

15. useSearchParams 获取seach 参数

查询参数不需要在路由中定义

使用useSearchParams hook来访问查询参数。其用法和useState类似，会返回当前对象和更改它的方法

更改searchParams时，必须传入所有的查询参数，否则会覆盖已有参数

但在最新的6.x版本中，无法从props获取参数。在类组件中获取seach参数的值，解决方法与上面一样.

16. useLocation 获取传递的state值

1.传递参数

或

navigate("/b/child2", { state: { id, title }});

2.接收参数

注： prop属性中的location已经没有了，所以在类组件不能获取到相应的数据了，

解决方案就是1. 写成函数 2. 使用高阶组件HOC (13,14,15,16 都是这样)

17. 多组路由

通常，一个应用中只有一个Routes组件。

但根据实际需要也可以定义多个路由出口（如侧边栏和主页面都要随URL而变化）

18. 路由组件懒加载

安装： npm i @loadable/component

import loadable from '@loadable/component'

 const ComponentNode = loadable(()=>{
            return import("./"+item.componentPath)
        })

<Route path={item.path} element={<ComponentNode />}>

19. 动态路由案例

菜单数据：

动态路由生成组件：

更多内容，请关注公主号：bug收集