react-router6|路由

1.概述

官方文档：Home v6.4.1 | React RouterReact Router 以三个不同的包发布到 npm 上，它们分别为：

1. 1. react-router: 路由的核心库，提供了很多的：组件、钩子。
   2. react-router-dom: 包含react-router所有内容，并添加一些专门用于 DOM 的组件，例如 <BrowserRouter>等 。
   3. react-router-native: 包括react-router所有内容，并添加一些专门用于ReactNative的API，例如:<NativeRouter>等。

2.BroserRouter和HashRouter

在 React Router 中，最外层的 API 通常就是用 BrowserRouter。BrowserRouter 的内部实现是用了 history 这个库和 React Context 来实现的，所以当你的用户前进后退时，history 这个库会记住用户的历史记录，这样需要跳转时可以直接操作。

BrowserRouter 使用时，通常用来包住其它需要路由的组件，所以通常会需要在你的应用的最外层用它，比如如下

import ReactDOM from 'react-dom'
import * as React from 'react'
import { BrowserRouter } from 'react-router-dom'
import App from './App`

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
, document.getElementById('app))

<HashRouter>

1. 说明：作用与<BrowserRouter>一样，但<HashRouter>修改的是地址栏的hash值。
2. 备注：6.x版本中<HashRouter>、<BrowserRouter> 的用法与 5.x 相同。

3.Routes和Route

routes和v5版本的switch有点类似。
switch的作用是，第一次匹配路由后，之后就不在匹配路由。
Routes也具有这个功能。

1. switch可使用，也可不使用。v5
2. Routes必须包裹Route。 v6

1.v6版本中移出了先前的 ，引入了新的替代者：。
和 要配合使用，且必须要用包裹。
相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
2.<Route caseSensitive属性用于指定：匹配时是否区分大小写（默认为 false）。
3.当URL发生变化时，都会查看其所有子 元素以找到最佳匹配并呈现组件 。

4. 也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 组件来渲染其子路由。

1.使用

2.严格区分大小写

4.Navigate重定向

5.NavLink （高亮）

1.修改默认active（高亮）的类名

v6版本是通过一个函数来修改高亮的类名。默认类名为active
如果选择的的时候，isActive参数为true。

6.useRoutes (路由表)

1.使用路由表的形式来代替Route

2.优化，直接把路由数组写在新文件中

7.嵌套路由

1.配合路由表嵌套路由

2.Outlet相当于vue的router-view

3.高亮精准匹配

当子路由显示，父级路由不展示高亮。
在父级路由上加上end，即可精准匹配。

8.路由传参

1.params

1.路由表中写动态参数

2.路由跳转路径中传输数据

3.使用useParams函数接收

4.使用useMatch接收参数

但是这个要传路径，且返回的数据结构较为复杂

2.search参数也就是query

1.search参数主要变化的就是接收参数使用的hook不同。

2.使用searchParams()接收参数

3.注意

第二个解构赋值的参数是设置query的变化，不经常使用。

4.使用useLocation获取参数

3.state参数

1.传state

2.使用useLocation获取参数

9.编程式导航

useNavigate（）

使用之后，即可使用返回的实例编程式跳转路由

1.编程式传params参数

2.编程式传search

3.传state

4.也可以使用该hook，达到跳转history

10 了解的hook

1.useRouterContext（）—判断是否存在路由环境中。

只要处于<BroswerRouter中，就是true。

2.useNavgiationType（）—返回当前导航类型

POP:浏览器刷新页面
PUSH：
REPLACE

3.useOutlet（）—用来呈现当前组件中要渲染的嵌套路由。

如果嵌套路由已经挂载，则显示挂载的嵌套路由。反之，则null

4.useResolvedPath（）—给定一个url，解析其中的path，search和hash值。