上一篇我们说到了路由组件的嵌套。想必你已经运用自如了。那么,这一次我们来聊一聊4.X中Router的变更。

在3.X中我们若使用路由的模式,可通过在Router上配置history的值即可。

例如,

import { Router, Route, hashHistory} from "react-router"
import routes from "./routes" <Router history={hashHistory} routes={routes}>
<Route path="/" component={App}/>
</Router>

在4.X中提供几种不同的路由组件来替代history属性的作用,分别是

<BrowserRouter>

import { BrowserRouter } from 'react-router-dom'

<BrowserRouter
basename={optionalString}
forceRefresh={optionalBool}
getUserConfirmation={optionalFunc}
keyLength={optionalNumber}
>
<App/>
</BrowserRouter>

<HashRouter>

import { HashRouter } from 'react-router-dom'

<HashRouter>
<App/>
</HashRouter>

<MemoryRouter> 一般用于测试或者无浏览器的环境中,像是react native中

<MemoryRouter
initialEntries={[ '/one', '/two', { pathname: '/three' } ]}
initialIndex={1}
>
<App/>
</MemoryRouter>

<StaticRouter> 一般用于服务端,永远不会改变location

<StaticRouter location={req.url} context={context}>
<App/>
</StaticRouter>

需要注意的是,router组件只能有一个子元素

笔记react router 4(三)的更多相关文章

  1. 笔记react router 4(二)

    上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...

  2. 笔记react router 4(一)

    用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...

  3. 笔记react router 4(五)

    或许,你觉得我麻烦,明明一篇文章可以搞定的内容,非要写几篇.是不是正在吐槽我?没关系,我的目的达到了.手动傲娇( ̄∇ ̄) 然后,我们就要来聊一聊withRouter了. 我们都知道,当我在访问路由配置 ...

  4. 笔记react router 4(四)

    看完Router的变化,接着来说<Switch>组件. 在3.X中,你可以指定很多子路由,但是只有第一个匹配的路径才会被渲染. 就像这样, <Route path='/' compo ...

  5. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  6. React Router学习笔记(转自阮一峰老师博客)

    React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...

  7. React Router V4.0学习笔记

    最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...

  8. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  9. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

随机推荐

  1. 第五个神奇的电梯(代码抢先看<1>)

    关于一些自认为比较独特的设计思路,也不知道是好还是坏,放在这里让大家一起看一下. 关于mian函数:因为采用了注册机制所以主函数比较简单. #include "stdafx.h" ...

  2. Twitter OAuth

    新浪微博和 Twitter 的 Oauth API 为什么感觉流程不一样 新浪: 开发者引导用户到新浪授权页面, 页面链接中需要带上自己的 apikey : 用户授权后新浪跳转到开发者指定指定的页面, ...

  3. windows 上让文件类型和程序关联的批处理程序。

    文件关联工具 地址: https://github.com/wll8/assoc-tool 本工具可以用来为你的便携程序添加文件关联,比如 nodepad2.exe . vscode 或其他图片处理程 ...

  4. ZOJ 3987 Numbers(Java枚举)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3987 题意:给出一个数n,现在要将它分为m个数,这m个数相加起来必须等于n ...

  5. 实现一个简单的flux

    前言 众所周知,React跟Flux是一对好基友. 其中,市场流行的Flux有Redux,Mobx,Reflux. 其中,用法最简单的是Reflux. 其数据流思路如下: +---------+ +- ...

  6. 【UOJ#196】【BZOJ4574】[Zjoi2016]线段树

    题目链接: http://www.lydsy.com/JudgeOnline/problem.php?id=4574 http://uoj.ac/problem/196 考虑数字随机并且值域够大,我们 ...

  7. IntelliJ IDEA Tomcat中端口被占用的问题

    早上来公司,新建了一个项目,启动Tomcat,报错,如图所示 端口1099被占用 cmd——netstat -aon|findstr 1099 此时出现了一个问题,输入:netstat -an,提示: ...

  8. centos7 安装nexus3

    一.安装前先安装好java JDK 和maven nexus 下载 链接:https://pan.baidu.com/s/1qQBNj2soc8Un4AoRejvEyw 密码: sb12 1.下载好后 ...

  9. 一个请求需要调用两个不同的数据库 添加DbContext

    当请求进入application中的方法时 会开启一个工作单元    这里面调用不同的DbContext 会默认使用第一次调用的DbContext 需要手动开启工作单元来隔离两个不同的DbContex ...

  10. 力扣(LeetCode)448. 找到所有数组中消失的数字

    给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组,数组中的元素一些出现了两次,另一些只出现一次. 找到所有在 [1, n] 范围之间没有出现在数组中的数字. 您能在不使 ...