React-router v4 路由配置方法小结

 更新时间:2017年08月08日 14:38:10   作者:zhiwei  
本篇文章主要介绍了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来包了一层。

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

相关文章

  • React-native桥接Android原生开发详解

    React-native桥接Android原生开发详解

    本篇文章主要介绍了React-native桥接Android原生开发详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • react纯函数组件setState更新页面不刷新的解决

    react纯函数组件setState更新页面不刷新的解决

    在开发过程中,经常遇到组件数据无法更新,本文主要介绍了react纯函数组件setState更新页面不刷新的解决,感兴趣的可以了解一下
    2021-06-06
  • React列表栏及购物车组件使用详解

    React列表栏及购物车组件使用详解

    这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 再次谈论React.js实现原生js拖拽效果引起的一系列问题

    再次谈论React.js实现原生js拖拽效果引起的一系列问题

    React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.本文给大家介绍React.js实现原生js拖拽效果,需要的朋友一起学习吧
    2016-04-04
  • webpack 2.x配置reactjs基本开发环境详解

    webpack 2.x配置reactjs基本开发环境详解

    本篇文章主要介绍了webpack 2.x配置reactjs基本开发环境详解,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • React实现全局组件的Toast轻提示效果

    React实现全局组件的Toast轻提示效果

    这篇文章主要介绍了React实现全局组件的Toast轻提示效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈react性能优化的方法

    浅谈react性能优化的方法

    这篇文章主要介绍了浅谈react性能优化的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React Router 如何使用history跳转的实现

    React Router 如何使用history跳转的实现

    这篇文章主要介绍了React Router 如何使用history跳转的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 自己动手封装一个React Native多级联动

    自己动手封装一个React Native多级联动

    这篇文章主要介绍了自己动手封装一个React Native多级联动,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • React-Native中一些常用组件的用法详解(二)

    React-Native中一些常用组件的用法详解(二)

    这篇文章主要跟大家介绍了关于React-Native中一些常用组件的用法的相关资料,其中详细介绍了关于ScrollView组件、ListView组件、Navigator组件、TableBarIOS组件以及网络请求等相关内容,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-06-06

最新评论