一、基本使用
- 1.首先要引入这些东西 import { BrowserRouter, Routes, Route, Link } from 'react-router-dom'
核心内置组件说明
1. BrowerRouter
作用: 包裹整个应用，一个React应用只需要使用一次
| 模式 | 实现方式 | 路由url表现 |
|---|---|---|
| HashRouter | 监听url hash值实现 | http://localhost:3000/#/about |
| BrowerRouter | h5的 history.pushState API实现 | http://localhost:3000/about |
2. Link
作用: 用于指定导航链接，完成声明式的路由跳转 类似于
这里to属性用于指定路由地址，表示要跳转到哪里去，Link组件最终会被渲染为原生的a链接
3. Routes
作用: 提供一个路由出口，组件内部会存在多个内置的Route组件，满足条件的路由会被渲染到组件内部
类比 router-view
4. Route
作用: 用于定义路由路径和渲染组件的对应关系 [element：因为react体系内 把组件叫做react element]
其中path属性用来指定匹配的路径地址，element属性指定要渲染的组件，图中配置的意思为: 当url上访问的地址为 /about 时，当前路由发生匹配，对应的About组件渲染
二 、编程式导航
声明式 【 Link to】 vs 编程式 【调用路由方法进行路由跳转】
概念: 通过js编程的方式进行路由页面跳转，比如说从首页跳转到关于页
实现步骤：
- 导入一个 useNavigate 钩子函数
- 执行 useNavigate 函数 得到 跳转函数
- 在事件中执行跳转函数完成路由跳转
这时候是可以返回上一级的 ，如果不需要返回上一级，比如登陆的时候，就需要加上replace 为true
三、关于路由跳转的参数
有两种传参的方式
- 1.通过 ' ？ ' 拼接参数，取参数的时候 用 searchParams()
-
2.通过 ' / ' 传参，取参的时候用 useParams()
使用 ' / ' 的时候 都得用动态路由传递
三、嵌套路由
1.基本使用
- 1.首先创建一个路由，父路由引入子路由
- 2.把孙路由放到子路由里面
- 总之就是需要定义关系，还有定义出口 （ 需要 引入 Oulet ）
2.默认二级路由
场景: 应用首次渲染完毕就需要显示的二级路由
实现步骤:
- 给默认二级路由标记index属性
- 把原本的路径path属性去掉
3.404路由配置
场景：当url的路径在整个路由配置中都找不到对应的path，使用404兜底组件进行渲染
很简单，就是单独创建一个组件 里面是404，然后他的path是星号 ' * ' ,匹配不到的时候就跳转到这个页面
下面的图就是没匹配到 cc 组件
4.集中式路由配置
场景: 当我们需要路由权限控制点时候, 对路由数组做一些权限的筛选过滤，所谓的集中式路由配置就是用一个数组统一把所有的路由对应关系写好替换 本来的Roues组件
需要引入 useRouters
