React 路由详解

一、SPA理解

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

二、路由理解

1. 前端路由：
   - 浏览器端路由，value是component，用于展示页面内容
   - 注册路由:<Router path="/test" componnet={Test}>
   - 工作过程：当浏览器的path编程/test时，当前路由组件就会变成Test组件
2. 后段路由：
   - value是function，用来处理客户端提交的请求
   - router.get(path,function(req,res))
   - 工作过程:当node接受一个请求时，根据请求路径找到匹配的路由，调用路由中的函数来处理请求，返回相应的数据

三、安装

React Router被拆分成三个包：

1. react-router (提供核心的路由组件与函数)
2. react-router-dom (运行在浏览器，前端人员使用)
3. react-router-native

yarn add react-router-dom --save

四、react-router-dom 相关组件

组件	作用
BrowserRouter	约定模式为history,使用HTML5提供的historyAPI来保存UI和URL的同步
HashRouter	约定模式为hash,使用URL的hash来保持UI和URL的同步
NavLink	声明式跳转,还可以约定路由激活状态
Link	声明式跳转 没有激活状态
Redirect	路由重定向
Route	匹配、展示
Switch	排他性匹配
Prompt	后置守卫
withRouter	把不是通过路由切换过来的组件中(一般组件)，将history、location、match三个对象传入props对象上

五、组件结构

BrowserRouter|HashRouter

• 根组件(App)
  • NavLink|Link
  • Route
  • Redirect
    • 子组件
      • NavLink|Link
      • Route

六、路由组件相关属性

BrowserRouter

属性	作用
basename	string类型,所有位置的基本URL，如果你的应用是从服务器上的子目录提供的,则需要将其设置为子目录。格式正确的基本名称应以斜杠开头，但不能以斜杠结尾
getUserConfirmation	function类型,确认导航功能。默认使用window.confirm
forceRefresh	布尔值,是否调整强制刷新,模拟旧式服务器渲染

Route

属性	作用
path	类型:string/object , 没有path属性的Router总是会匹配
exact	类型:boolean , 为true时要求全路径匹配,默认false模糊匹配
component	类型:function/r、ReactElement , 在地址匹配的时候React的组件才会被渲染，route props也会随着一起被渲染
render	类型:function , 内联渲染和包装组件，要求要返回目标组件的调用

Link

属性	作用
to	类型:string/{pathname,search,hash}, 要跳转的路径或地址
replace	类型:boolean , 是否替换历史记录

NanLink

属性	作用
to	类型:string/object, 要跳转的路径或地址
replace	类型:boolean , 是否替换历史记录
activeClassName	类型:string , 当元素被选择时，设置选中样式，默认为active
activeStyle	类型:object , 当元素被选中时，设置选中样式
exact	类型:boolean , 严格模式匹配

Switch

1. 通常情况下，path和component是一一对应的关系。
2. Switch可以提高路由匹配效率(单一匹配)。
3. 用来渲染匹配地址的第一个Route或者Redirect，仅渲染一个路由，排他性路由,默认全匹配(场景：侧边栏和面包屑，引导选项卡等

属性	类型
location	string/object
children	node

Redirect
一般写在所有路由注册的最下方，当所有路由都无法匹配时，跳转到Redirect指定的路由

属性	作用
from	类型:string, 来自
to	类型:string/object, 去向
push	类型:boolean, 添加历史记录
exact	类型:boolean, 严格匹配
sensitive	类型:boolean 区分大小写

七、向路由组件传递参数

params参数

//路由链接携带参数
<Link to='/demo/test/tom/18'}>详情</Link>

//注册路由(声明接受)
<Route path="/demo/test/:name/:age" component={Test}/>

//接收参数：
this.props.match.params

search参数

//路由链接携带参数
<Link to='/demo/test?name=tom&age=18'}>详情</Link>

//注册路由(无需声明，正常注册即可)
<Route path="/demo/test" component={Test}/>

//接收参数：
this.props.location.search

state参数

//路由链接携带参数
<Link to={{pathname:'/demo/test',state:{name:'tom',age:18}}}>详情</Link>

//注册路由(无需声明，正常注册即可)
<Route path="/demo/test" component={Test}/>

//接收参数：
this.props.location.state

编程式跳转
借助this.prosp.history对象上的API对操作路由跳转、前进、后退
this.prosp.history.push()
this.prosp.history.replace()
his.prosp.history.goBack()
this.prosp.history.goForward()
this.prosp.history.go()

八、BrowserRouter与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对象中。
   - HashRouter刷新后会导致路由state参数的丢失.

HashRouter可以用于解决一些路径错误相关的问题

九、总结

路由组件与一般组件

1. 写法不同：
   - 一般组件：
   - 路由组件：
2. 存放位置不同：
   - 一般组件在components文件夹
   - 路由组件在pages
3. 接收到的props不同：
   - 一般组件：写组件标签时传递了什么，就能收到什么
   - 路由组件：接收到三个固定的属性:

history:

1. go: ƒ go(n)
2. goBack: ƒ goBack()
3. goForward: ƒ goForward()
4. push: ƒ push(path, state)
5. replace: ƒ replace(path, state)

location:

1. pathname: “/about”
   2. search: “”
   3. state: undefined

match:

1. params: {}
2. path: “/about”
3. url: “/about”

解决多级路径刷新页面样式丢失的问题

1. public/index.html 中 引入样式时不写 ./ 写 / （常用）
2. public/index.html 中 引入样式时不写 ./ 写 %PUBLIC_URL% （常用）
3. 使用HashRouter

路由的严格匹配与模糊匹配

1. 默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）
2. 开启严格匹配：
3. 严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由

嵌套路由

1. 注册子路由时要写上父路由的path值
2. 路由的匹配是按照注册路由的顺序进行的