笔记react router 4(三)
上一篇我们说到了路由组件的嵌套。想必你已经运用自如了。那么,这一次我们来聊一聊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(三)的更多相关文章
- 笔记react router 4(二)
上一篇我们提到react router 4的dom特性.那么这一次,我们来说一说4.X中的路由组件嵌套. 用过3.X的同学应该知道,路由组件的嵌套(即,路由的配置)方式是通过给<Route> ...
- 笔记react router 4(一)
用过react router4.X的小伙伴一定知道,比起3.X的版本,router的使用上有了很大的改变. 首先,我们只需要安装 react-router-dom 即可使用.看到“dom”想必你就该知 ...
- 笔记react router 4(五)
或许,你觉得我麻烦,明明一篇文章可以搞定的内容,非要写几篇.是不是正在吐槽我?没关系,我的目的达到了.手动傲娇( ̄∇ ̄) 然后,我们就要来聊一聊withRouter了. 我们都知道,当我在访问路由配置 ...
- 笔记react router 4(四)
看完Router的变化,接着来说<Switch>组件. 在3.X中,你可以指定很多子路由,但是只有第一个匹配的路径才会被渲染. 就像这样, <Route path='/' compo ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- React Router学习笔记(转自阮一峰老师博客)
React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 impor ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- [转] React Router 使用教程
PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...
- React Router 使用教程
一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...
随机推荐
- JS获取节点的兄弟,父级,子级元素
https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...
- 论文笔记:ReNet: A Recurrent Neural Network Based Alternative to Convolutional Networks
ReNet: A Recurrent Neural Network Based Alternative to Convolutional Networks2018-03-05 11:13:05 ...
- UVA 10870 Recurrences(矩阵乘法)
题意 求解递推式 \(f(n)=a_1*f(n-1)+a_2*f(n-2)+....+a_d*f(n-d)\) 的第 \(n\) 项模以 \(m\). \(1 \leq n \leq 2^{31}-1 ...
- Derek解读Bytom源码-protobuf生成比原核心代码
作者:Derek 简介 Github地址:https://github.com/Bytom/bytom Gitee地址:https://gitee.com/BytomBlockchain/bytom ...
- Latex: 添加IEEE论文keywords
参考: How to use \IEEEkeywords Latex: 添加IEEE论文keywords 方法: \begin{IEEEkeywords} keyword1, keyword2. \e ...
- 【Django】【二】模板
1. Django-bootstrap3 guest>python -m pip install django-bootstrap3 [代码] settings.py ""& ...
- Pandas 基础(1) - 初识及安装 yupyter
Hello, 大家好, 昨天说了我会再更新一个关于 Pandas 基础知识的教程, 这里就是啦......Pandas 被广泛应用于数据分析领域, 是一个很好的分析工具, 也是我们后面学习 machi ...
- _event_worldstate_team
EventId 事件ID ID WorldStateUI.dbc第10列数字部分 TeamId 事件玩家分组,攻守(防守为1,进攻为2),自定义阵营(_faction表自定义阵营ID),公会(公会gu ...
- modal结合art-template
内容div <div id="modal-cont"></div> 模板tpl <script id="modal-tpl" ty ...
- 力扣(LeetCode)219. 存在重复元素 II
给定一个整数数组和一个整数 k,判断数组中是否存在两个不同的索引 i 和 j,使得 nums [i] = nums [j],并且 i 和 j 的差的绝对值最大为 k. 示例 1: 输入: nums = ...