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 ...
随机推荐
- 05: 配置yum源
1.1 将镜像复制到本地创建yum源 1.将准备好的系统镜像放到指定的目录,本次目录指定在:/dawnfs/sourcecode 2.创建挂载目录:mkdir /mnt/yum 3.挂载镜像: mou ...
- Python3基础 os listdir curdir 查看当前工作目录的所有文件的名字
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- 格式化输出%与format
一.%的用法 1.1整数输出 %o —— oct 八进制 : %d —— dec 十进制 : %x —— hex 十六进制 >>> print('%o' % 20) 24 >& ...
- 权限管理,pymysql模块
权限管理 权限管理重点 MySQL 默认有个root用户,但是这个用户权限太大,一般只在管理数据库时候才用.如果在项目中要连接 MySQL 数据库,则建议新建一个权限较小的用户来连接. 在 MySQL ...
- git如何获取用户名和邮箱
答: git config user.name (获取用户名) git config user.email (获取邮箱)
- 【第三十章】 elk(1) - 第一种架构(最简架构)
软件版本: es:2.4.0 logstash:2.4.0 kibana:4.6.1 一.logstash安装(收集.过滤日志.构建索引) 1.下载:https://www.elastic.co/do ...
- hdu 6180 Schedule
Schedule Problem Description There are N schedules, the i-th schedule has start time si and end time ...
- thymeleaf和easyui配合可能出现的错误
thymeleaf和easyui 在easyui的内页,不再使用th:href引入静态资源文件. 在easyui页面中,script执行easyui自己的方法要加入: <script th:in ...
- UVa 1620 懒惰的苏珊(逆序数)
https://vjudge.net/problem/UVA-1620 题意:给出一个序列,每次可以翻转4个连续的数,判断是否可以变成1,2,3...n. 思路:考虑逆序数,通过计算可以得出每次翻转4 ...
- hdu 2824 The Euler function 欧拉函数打表
The Euler function Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Other ...