React Router 5 & 6 用法整理
文档、资料
v5文档：https://v5.reactrouter.com/web/guides/quick-start
React Router 5
基本使用
npm install react-router-dom@5
import {Link, Router, BrowserRouter} from 'react-router-dom';
// 要使用 BrowserRouter 或者 HashRouter 把 Link 和 Switch 进行包裹！
<BrowserRouter>
<h1>路由DEMO</h1>
<Link to="/hello">go~Hello</Link> <br/>
<Link to="/welcome">go~welcome</Link>
<h1>注册路由</h1>
{/* 注册路由 */}
<Route path="/hello" component={Hello}/>
<Route path="/welcome" component={Welcome}/>
</BrowserRouter>
- 所有Route都会一一匹配
- 如果当前的path，符合Route组件的path，则Route配置的component就会展示，符合路由规则的都会挨个显示
NavLink
作用与Link相同，但在每次切换时会给NavLink标签加上一个类名，默认是 active
可以通过 activeClassName 属性来设置这个路由激活时添加的类名
路由组件、一般组件
路由组件接收到的props与一般组件不同
- history：
- go：去往指定记录
- goBack：后退
- goForward：前进
- push：跳转指定路由
- replace：跳转指定路由（replace模式）
- location：地址信息
- action：路由的具体操作，PUSH / REPLACE
- block：
- createHref：
- length：
- location：
- key：
- hash：
- pathname：
- search：
- state：
- match：
- params：
- path：
- url：
- isExact：是否是精准匹配
- staticContext：
Switch
如果存在多个同时匹配的路由，则匹配的Route对应的组件，都会进行显示
如果只想匹配第一个符合的，那么需要把Route用Switch包起来
这样当匹配到第一个之后，就不会接着往下匹配了！
Switch可以提高路由匹配效率（单一匹配）
模糊匹配、精准匹配
默认是模糊匹配
如果是多级路径，会先将路由路径按 / 分割，然后挨个匹配，如果第一个匹配到了，就去显示，然后在组件里再匹配剩下的
exact：准确地，精准的
将这个属性添加到 Route 中，就可以开启精准匹配，也可以叫严格匹配
Redirect 重定向
一般写在最后，如果都匹配不上了，就使用Redirect指定的路由
<Redirect to="" />
路由跳转时传递参数的方式
params
在在匹配到路由之后，接着写要要传递的参数值，然后在Route路由的path中，使用 :参数名 来接收，收集到的参数会在路有参数的 match.params 里
search
通过 routePath?key=value&k2=v2&... 的形式传参，即 urlencoding 编码
但是search参数不会自动变成对象，需要自己拆分出传递过来的键和值
或者使用 querystring库来解析search参数，一般引入为 qs
state
不同于组件中的state状态属性，这个state是属于路由的一个内容
将Link的to写成对象：{pathname: '路由地址', state: 路由的state参数对象}
push、replace
默认使用的是push模式，路由跳转其实是做了压栈的操作，跳转的历史可以进行跳转
开启replace模式：
在Link组件上写上 replace 属性即可，或者 replace={true}
编程式路由
主要是利用路由组件传递的参数中的history上的API （注意：只有路由组件的prop才有history）
go(n)：跳转到指定的路由,n为正表示前进，n为负表示后退
goBack()：跳转到上一级
goForward()：跳转到下一级
push(path, state)：压栈，产生历史
replace(path, state)：替换栈顶，不产生历史
withRouter
为了让一般组件也能使用编程式路由相关的API，可以使用 withRouter
用 withRouter 将一般组件包裹起来，就可以给一般组件加上路由相关的那些API
import {withRouter} from 'react-router-dom';
class 组件名 ......};
export default withRouter(组件名);
