React-router v4 路由配置方法小结
本文主要介绍了react-router v4 路由配置方法小结,分享给大家,也给自己留个笔记
一. switch 、router 、route三者的区别
1、route
route 是建立location 和 ui的最直接联系
2、router
react-router v4 中,router被拆分成了staticrouter、memoryrouter、browserrouter、hashrouter、nativerouter。
memoryrouter、browserrouter、hashrouter 等于
import { router } from 'react-router' <!--这里可以有三种--> <!--history 部分源码 exports.createbrowserhistory = _createbrowserhistory3.default; exports.createhashhistory = _createhashhistory3.default; exports.creatememoryhistory = _creatememoryhistory3.default; --> import createbrowserhistory from 'history/createbrowserhistory' // const history = createbrowserhistory() <router history={history}> <app/> </router>
nativerouter(给rn使用的)
a <router> for ios and android apps built using react native.
这里新增strict 和 exact
使用了strict location 大于等于path才能匹配,eq path='/one' location='/one/a'能匹配。
使用了exact location 约等于 path 才能匹配,eq path='/one' location='/one'或者 '/one/'能匹配,所以说是约等于。
使用了exact 和 strict location = path才能匹配
staticrouter(后续补充)
3、switch
这是v4版本中新添加,主要用来做唯一匹配的功能。就是想要在众多路由中只匹配其中一个路由。
二、v4 版本中路由应该如何配置呢?
1.基本配置(这个和v3中基本一致,效果也基本一样)
匹配 <= location eq.( /b => / + /b ) ( / => / )
<browserrouter forcerefresh={!supportshistory} keylength={12}> <div> <route path="/" component={acontainer} /> <route path="/b" component={bcontainer} /> </div> </browserrouter>
2.含switch 配置
匹配 <= location eq.( /b => /b ) ( / => / ) 唯一匹配
<browserrouter forcerefresh={!supportshistory} keylength={12}> <switch> //这里用exact,仅仅是担心location被 path='/'截胡了。 <route exact path="/" component={acontainer} /> <route path="/b" component={bcontainer} /> </switch> </browserrouter>
问题(三个问题)
1.如何设置公共的component
第一种方式
<browserrouter forcerefresh={!supportshistory} keylength={12}> <div> <route path="/" component={acontainer} /> <route path="/b" component={bcontainer} /> </div> </browserrouter>
第二种方式(父子嵌套)
<browserrouter forcerefresh={!supportshistory} keylength={12}> <div > <route path="/" component={acontainer} /> <route path="/b" component={parent} /> {/* {app()} */} </div> </browserrouter>
const parent = ({ match }) => ( <div> <route path={`${match.url}/`} component={bcontainer} /> <route path={`${match.url}/c`} component={ccontainer} /> <route path={`${match.url}/d`} component={dcontainer} /> </div> );
这种情况 bcontainer就是是公用的component
2.如何设置getcomponent,按需加载
3.是否有简化写法
npm install --save react-router-config
第一步 配置路由
const routes = [ { component: bcontainer, routes: [ { path: '/', exact: true, component: bcontainer }, { path: '/b/b', component: bcontainer, routes: [ { path: '/b/b/b', component: bcontainer } ] } ] } ]
第二步 设置路由
<browserrouter forcerefresh={!supportshistory} keylength={12}> <div > {renderroutes(routes)} </div> </browserrouter>
第三步 需要在container的render中去调用方法
<div> 1111 {renderroutes(this.props.route.routes)} </div>
这个优势是可以统一配置,劣势是需要在container中统一调用,但是这个抽出来统一实现,问题也不大,并且还可以解决 问题一。
这个renderroutes实际是就是用一层switch和多个route来包了一层。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
推荐阅读