【React】路由

路由介绍

SPA：单页面多路由，旨在通过多路由来模拟多页面的效果

SPA理解
1、 单页Web应用（single page web application，SPA）
2、 整个应用只有一个完整的页面
3、 点击页面中的链接不会刷新页面，只会做页面的局部更新
4、 数据都需要通过ajax请求获取, 并在前端异步展现

单页面多页面指的是 .html 文件，网站切换 html 文件就会刷新。SPA可以做到不刷新页面就可以在多个页面之间切换。传统的加载网页方式是每次切换都得请求后端数据，然后在前端刷新页面。

---

工作原理

一个路由就是一个映射关系(key:value)；
key为路径, value可能是function或component

1、 浏览器端路由，value是component，用于展示页面内容
2、 注册路由: <Link to="/test">Test</Link>
3、 路径匹配：<Route path="/test" component={Test}> 当浏览器地址栏的path变为/test时, 当前路由组件就会变为Test组件

---

路由分类：

一般组件接收参数原则是：传递什么，接收什么
路由组件接受参数会收到三个固定的属性：history，location，match

BrowserRouter：h5路由（history API）——常用
HashRouter：哈希路由

---

路由传参：

1. params参数（常用）

注册路由(携带参数)：<Link to={'/demo/test/tom/18'}>详情</Link>
路由匹配(声明接收)：<Route path="/demo/test/:name/:age" component={Test}/>
接收参数：this.props.match.params
注：浏览器地址栏会显示传递的参数

2. search参数（次常用）

注册路由(携带参数)：<Link to={'/demo/test?name=tom&age=18'}>详情</Link>
路由匹配：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.search
注：浏览器地址栏会显示传递的参数；获取到的search是urlencoded编码字符串，需要借助querystring解析

3. state参数（少）

注册路由(携带参数)：<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>
路由匹配：<Route path="/demo/test" component={Test}/>
接收参数：this.props.location.state
注：浏览器地址栏不会显示传递的参数；使用BrowserRouter时，刷新浏览器也可以保留住参数，因为state保存在history对象中（BOM）；但是HashRouter没有保存，所以刷新浏览器传递的参数会消失

---

路由比较：

1、底层原理不一样
 BrowserRouter使用的是H5的history API，不兼容IE9及以下版本
 HashRouter使用的是URL的哈希值

2、path表现形式不一样
 BrowserRouter的路径中没有#,例如：localhost:3000/demo/test
 HashRouter的路径包含#,例如：localhost:3000/#/demo/test

3、刷新后对路由state参数的影响
  BrowserRouter没有任何影响，因为state保存在history对象中(BOM)。
  ashRouter刷新后会导致路由state参数的丢失！！！

注：React路由在浏览器端展示的DOM形式是 a 标签；标签体内容也是特殊的标签属性

将路由状态同步到全局 store 中

配置路由的文件格式推荐 jsx，我用了 tsx 遇到了一些奇怪的问题
npmjs官方指导
react-router-dom版本v6可能遇到的问题
可以参考的大佬配置方法