原生版 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:March 3rd, 2020 at 06:46 pm
同道中人,加个好友