当前位置:首页 > 日记 > 正文

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

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()} *

相关文章

详解Vue + Vuex 如何使用 vm.$next

详解Vue + Vuex 如何使用 vm.$next

如何使用,详解,电脑软件,Vue,Vuex,vm.$nextTick简单说,因为DOM至少会在当前tick里面的代码全部执行完毕再更新。所以不可能做到在修改数据后并且DOM更新后再执行,要保证在DOM更新以后再执行某一块代码,就必须把这块代码放到下一次事件循环里面…

使用canvas及js简单生成验证码方法

使用canvas及js简单生成验证码方法

方法,验证码,简单,电脑软件,canvas,在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点。验证码生成步骤是:1.生成一张画布canvas2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到画布中 5.点击画布更换验证…

正则表达式字符类加深理解

正则表达式字符类加深理解

字符,正则表达式,电脑软件,正则表达式字符类加深理解:一.基本概念:字符类相对来说是比较简单的,但是也有可能由于理解不够深入或者大意造成一些误区,下面再来做一下介绍。字符类[]能够匹配包含在中括号中的一系列字符中的任意一个,但是匹配的…

Excel表格制作中如何隐藏函数

Excel表格制作中如何隐藏函数

函数,表格,电脑软件,Excel,  在一般的Excel使用中的公式或者函数,是完全能够让浏览者看到的。那么如果有办法将Excel中的公式或函数隐藏起来,只显示运算结果,这样会比较好。以下是小编为您带来的关于Excel隐藏函数,希望对您有所帮助。Excel隐…

Photoshop利用滤镜制作彩色拉丝效

Photoshop利用滤镜制作彩色拉丝效

滤镜,彩色,效果,电脑软件,Photoshop,今天为大家分享Photoshop制作彩色拉丝效果方法,操作很简单的,喜欢的朋友可以参考本文,来看看吧!1、在ps软件中,新建一个800*800的文档,填充黑色,然后在滤镜中添加镜头光晕,如图所示2、再次在滤镜中添加镜头光晕,…

JavaScript数组push方法使用注意事

JavaScript数组push方法使用注意事

方法,数组,注意事项,电脑软件,JavaScript,js 数组的push方法,想必大家都知道是向数组末尾添加元素,但是有一个很关键的点需注意:引自 MDN返回值当调用该方法时,新的 length 属性值将被返回。var sports = ["soccer", "baseball"];var total…

word设置纸张大小的两种方法

word设置纸张大小的两种方法

方法,设置,纸张,大小,两种,  办公经常学要调节纸张大小,虽然常用,但偶尔还是会忘记如何调整纸张大小的方法,那么下面就由小编给大家分享下word设置纸张大小的技巧,希望能帮助到您。word设置纸张大小方法一步骤一:打开word软件,点击桌面快捷图标…

Visual Studio 2017正式版发布 Mac

Visual Studio 2017正式版发布 Mac

新功能,正式版,特性,有哪些,电脑软件, 期待已久的由微软推出的软件开发工具Visual Studio 2017正式版马上要推出了,而Visual Studio 2017 正式版发布时间和Mac版新特性有哪些呢?让我们见证一下Visual Studio 20周年纪念的倾情推荐吧。…

JavaScript基础之this详解

JavaScript基础之this详解

详解,基础,电脑软件,JavaScript,JavaScript的this和Java等面向对象语言中的this大不一样,bind()、call()和apply()函数更是将this的灵活度进一步延伸。为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。如果对…

excel2010背景大小如何调整

excel2010背景大小如何调整

调整,教程,方法,显示,设置,  在excel中插图背景图片的时候,往往会因为图片太大或太小不合我们心意,要如何才能够调整过来呢。下面让小编为你带来excel2010设置背景大小的方法,希望对你有帮助!excel背景大小的设置方法方法一、直接缩小图像在e…

AI结合c4d设计三维立体文字和图案

AI结合c4d设计三维立体文字和图案

详细教程,文字,图案,三维立体,电脑软件,ai和c4d怎么将平面的文字快速转换成3维的立体效果呢?下面我们就来看看详细的教程,很简单,感兴趣的朋友可以进来参考一下。软件名称:Adobe Illustrator CS6 (AI cs6) 精简绿色中文版(32位+64位)软件大小:20…

基于javascript中的typeof和类型判

基于javascript中的typeof和类型判

类型,详解,电脑软件,javascript,typeof,typeofECMAScript 有 5 种原始类型(primitive type),即 Undefined、Null、Boolean、Number 和 String。我们都知道可以使用typeof运算符求得一个变量的类型,但是对引用类型变量却只会返回object,也就是说t…