1.jpg原生版 React-router-native
浏览器版本
React-router-dom

yarn add react-router-dom

import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'

<Router>

<Route path='/'  exact component={Cookbooks}></Route>
<Route path='/maps' component={xxx}></Route>

</Router>

exact 精准匹配

原本是包容性如有！
派他性路由--->Switch

<Switch>

<Route path='/' exact component={Cookbooks}></Route>
<Route path='/maps' component={xxx}></Route>
   <Route path='*' component={page404}></Route>

</Switch>

this:在被route包裹中定义的组件，子组件中的this.props中被定义上history,location,match对象，有很多方法和数据可以调用！

Link:
to

NavLink:
to
activeClassName

Route:上的属性--这三个都有props属性
1.component={组件} path匹配了，才会渲染，会卸载组件
2.render={函数式组件} path匹配了，才会渲染 ，只是渲染组件
3.(牛逼-可以自定义route事件，可以拿到props的三大无敌属性history,location,match)children={函数式组件} 不管匹不匹配都会渲染

让任意一个组件拥有props--使用高阶组件挂在上去withRouter
withRouter

React-router-dom
版本：react-router -3.0
版本：react-router-dom -4.x/5.x

react-router-dom -4.x/5.x的区别：
1、5.x性能提升
2、解决了两个bug

-- Router 不需要一个唯一的子组件 --之前需要一个标签包裹
-- Router 再和connect一起使用的时候，4.x要求withRouter--Router在外定义。

5.x可以卸载connect里面 了

Last modification：February 7th, 2022 at 08:01 pm
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏