React-Router v4.0 hashRouter使用js跳转
React-Router v4.0上已经不推荐使用hashRouter,主推browserRouter,但是因为使用browserRouter需要服务端配合可能造成不便,有时还是需要用到hashRouter。下面是v4.0的React-Router中hashRouter以js方式跳转的实现步骤。
- v4.0剥离了history,所以要操作history,需要安装支持包:
npm install history --save
- 在要跳转的地方对应的js文件中,引入createHashHistory并执行代码,以跳转到'/share'举例:
import { createHashHistory } from 'history'
createHashHistory().push('/share')
- 已经ok了。
在使用上述方法跳转之前,需要确认已经定义Router,可参考下述代码:
import { HashRouter as Router, Route, Switch } from 'react-router-dom'
...
<Router>
<App>
<Switch>
<Route path='/index' component={显示的组件1}>
<Route path='/share' component={显示的组件2}>
...
</Switch>
</App>
</Router>
React-Router v4.0 hashRouter使用js跳转的更多相关文章
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- [Web 前端] React Router v4 入坑指南
cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- 初步学习React Router 4.0
React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...
- React Router 4.0 + webpack 实现组件按需加载
网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...
- React Router V4发布
React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...
- [React Router v4] Intercept Route Changes
If a user has entered some input, or the current Route is in a “dirty” state and we want to confirm ...
随机推荐
- Confluence5.8部分空间名称显示为问号的解决方案
Confluence5.8部分空间名称显示为问号的解决方案 原因: 连接MySQL的时候,有没有在连接串中指定&useUnicode=true&characterEncoding=ut ...
- Executor简析
本文只做简要解析,实际情形下我们多用spring的taskExecutor 直接使用new Thread()创建线程的缺点: 1.new Thread()耗费性能 2.调用new Thread()创建 ...
- Pycharm 2017 激活码
Pycharm 2017 激活码 server选项里边输入: http://idea.liyang.io 我是通过这个成功的
- JS ——DOM,BOM(包含盒模型,动画)总结
JS盒模型 content: 通过计算后样式获取padding + content: box.clientWidth | box.clientHeightborder + padding + cont ...
- luogu1049装箱问题
装箱问题 传送门 一个箱子容量为V//容量 同时有n个物品//n个 体积&&价值 要求n个物品中任取若干个装入箱内,使箱子的剩余空间为最小// v减去价值最大 */ #include& ...
- 高斯日记|2013年蓝桥杯B组题解析第一题-fishers
高斯日记 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯出生后的第几 ...
- zedgraph右键菜单的汉化
http://blog.csdn.net/jeryler/article/details/7876376 修改 zedGraphControl的ContextMenuBuilder事件即可! zedG ...
- 【附5】springboot之配置文件
本文转载自http://www.jianshu.com/p/80621291373b,作者:龙白一梦 我的boss 代码从开发到测试要经过各种环境,开发环境,测试环境,demo环境,线上环境,各种环境 ...
- java的Date() 转换符
本字段下均转自 csdn 阿念1989 本文是学习网络上的文章时的总结,感谢大家无私的分享. System.out.printf()方法可以对日期做处理输出. 对应列表 转换符 类型 举例 c 完整的 ...
- bootstrap datarangepicker如何使用
本文为博主原创,未经允许不得转载: 下载资源文件: 地址:Github:https://github.com/dangrossman/bootstrap-daterangepicker/ 1.页面引用 ...