React-routerv4路由配置的示例分析

这篇文章主要介绍了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'


import createBrowserHistory from 'history/createBrowserHistory'
//
const history = createBrowserHistory()

NativeRouter（给rn使用的）

A 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 ) ( / => / )

2.含Switch 配置

匹配 <= location eq.( /b => /b ) ( / => / ) 唯一匹配

 
   
       //这里用exact，仅仅是担心location被 path='/'截胡了。

问题（三个问题）

1.如何设置公共的Component

第一种方式

第二种方式(父子嵌套)

 
   
    
    
    {/* {app()} */}

const Parent = ({ match }) => (
 
  
  
  
 
);

这种情况 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
     }
    ]
   }
  ]
 }
]

第二步设置路由


   
     {renderRoutes(routes)}

第三步需要在container的render中去调用方法

 
 1111
 {renderRoutes(this.props.route.routes)}

这个优势是可以统一配置，劣势是需要在container中统一调用，但是这个抽出来统一实现，问题也不大，并且还可以解决问题一。

这个renderRoutes实际是就是用一层Switch和多个Route来包了一层。

React-router v4路由配置的示例分析

感谢你能够认真阅读完这篇文章，希望小编分享的“React-router v4路由配置的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

名称栏目：React-routerv4路由配置的示例分析
URL网址：http://mswzjz.cn/article/psesjd.html

网站建设知识

React-routerv4路由配置的示例分析

其他资讯