时间:2021-05-26
本文主要介绍了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} /> {} </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来包了一层。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
react-router模块化配置因为公司的需要最近踏进了react坑,一直在挖坑填坑,在路由这一块折腾得不行。直接进入主题,配置react-router模块化
本文介绍了React从react-router路由上做登陆验证控制的方法,分享给大家,具体如下:验证代码importReactfrom'react'import
本文介绍关于react-router的几种配置方式详解,分享给大家,具体如下:路由的概念路由的作用就是将url和函数进行映射,在单页面应用中路由是必不可少的部分
前言React-Router已经发布了多个版本,利用路由导航的使用方法都不大一样,在这里总结一下。React-Router2.0.0版本2.0.0版本需要使用b
在react-router中组件里面的跳转可以用但是在组件外面改如何跳转,需要用到react路由的historyreplace方法和push方法使用形式一样,r