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 ...
随机推荐
- 20145310《网络对抗技术》Exp6 信息搜集技术
实验内容 本次实验的目标是掌握信息搜集的最基础技能.具体有 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点 ( ...
- JavaScript:正则表达式 应用
1. var data = "<table id=\"test\"><tr class=\"light\"><td> ...
- 逃离迷宫(BFS)题解
Problem Description 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地方是空地,gloria可以穿越,有 ...
- mysql删除sql表添加别名及删除sql的注意事项
本文为博主原创,未经允许不得转载: 根据平常的习惯,个人会将操作的表后面添加一个别名,无论是使用还是不使用的时候,均是为了 修改还是扩展sql的时候更加安全,方便,快捷. 今天在写删除的sql时,对表 ...
- 【TCP/IP详解 卷一:协议】第二十一章 TCP的超时与重传
作为TCP的重头戏,本章节涉及了许多关于计算方面的内容,使用了大量的例子来指明一些观点. 我使用的理解方法是:通过别人的博客,以及实例结合进行理解,不然会很吃力. 21.1 引言 reliable T ...
- 1、Python快速入门(0529)
学习来自马哥教育的视频,感谢马哥 编程语言: 用户: 问题空间 计算机:解决问题 解空间 抽象: 机器代码-->微码编程-->高级语言 (语言的高下级的是根据语言是否被人类容易理解或者更接 ...
- POJ 3744 Scout YYF I(矩阵快速幂优化+概率dp)
http://poj.org/problem?id=3744 题意: 现在有个屌丝要穿越一个雷区,雷分布在一条直线上,但是分布的范围很大,现在这个屌丝从1出发,p的概率往前走1步,1-p的概率往前走2 ...
- 【BZOJ】 3238: [Ahoi2013]差异
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3238 求:$${\sum _{i=1}^{n-1}\sum _{j=i+1}^{n}len ...
- pandas 处理数据中NaN数据
使用dropna()函数去掉NaN的行或列 import pandas as pd import pickle import numpy as np dates = pd.date_range() d ...
- TDD、BDD、DDD
TDDTest-Driven DevelopmentTest-Driven Development (TDD) is a software development technique where au ...