未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
本文主要介绍了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-router v4 路由配置方法小结

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: ReactAndroidiOSReact Native
tags: gt,lt,path,component,Route,BrowserRouter,div,location,bContainer,Switch,Router,exact,匹配,v4,keyLength
分页:12
转载请注明
本文标题:React-router v4 路由配置方法小结
本站链接:http://www.codesec.net/view/561131.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(64)