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来包了一层。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。