React-Router v4.0上已经不推荐使用hashRouter,主推browserRouter,但是因为使用browserRouter需要服务端配合可能造成不便,有时还是需要用到hashRouter。下面是v4.0的React-Router中hashRouter以js方式跳转的实现步骤。

  1. v4.0剥离了history,所以要操作history,需要安装支持包:
npm install history --save
  1. 在要跳转的地方对应的js文件中,引入createHashHistory并执行代码,以跳转到'/share'举例:
import { createHashHistory } from 'history'
createHashHistory().push('/share')
  1. 已经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跳转的更多相关文章

  1. React Router V4.0学习笔记

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

  2. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  3. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

  4. React Router 4.0 体验

    React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...

  5. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  6. 初步学习React Router 4.0

      React Router 4.0 是react官方推荐的路由库.4是已经正式发布的最新版本. 初始化项目启动之后: npm run eject 弹出配置文件.自定义配置webpack 查看下pac ...

  7. React Router 4.0 + webpack 实现组件按需加载

    网上关于React Router 4.0的按需加载文章有很多,大致的思路都一样,但是其实具体实现起来却要根据自己的实际情况来定,这里主要介绍一下我的实现方式. 主要方式是通过Route组件的rende ...

  8. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  9. [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 ...

随机推荐

  1. 20145310《网络对抗技术》Exp6 信息搜集技术

    实验内容 本次实验的目标是掌握信息搜集的最基础技能.具体有 (1)各种搜索技巧的应用 (2)DNS IP注册信息的查询 (3)基本的扫描技术:主机发现.端口扫描.OS及服务版本探测.具体服务的查点 ( ...

  2. JavaScript:正则表达式 应用

    1. var data = "<table id=\"test\"><tr class=\"light\"><td> ...

  3. 逃离迷宫(BFS)题解

    Problem Description 给定一个m × n (m行, n列)的迷宫,迷宫中有两个位置,gloria想从迷宫的一个位置走到另外一个位置,当然迷宫中有些地方是空地,gloria可以穿越,有 ...

  4. mysql删除sql表添加别名及删除sql的注意事项

    本文为博主原创,未经允许不得转载: 根据平常的习惯,个人会将操作的表后面添加一个别名,无论是使用还是不使用的时候,均是为了 修改还是扩展sql的时候更加安全,方便,快捷. 今天在写删除的sql时,对表 ...

  5. 【TCP/IP详解 卷一:协议】第二十一章 TCP的超时与重传

    作为TCP的重头戏,本章节涉及了许多关于计算方面的内容,使用了大量的例子来指明一些观点. 我使用的理解方法是:通过别人的博客,以及实例结合进行理解,不然会很吃力. 21.1 引言 reliable T ...

  6. 1、Python快速入门(0529)

    学习来自马哥教育的视频,感谢马哥 编程语言: 用户: 问题空间 计算机:解决问题 解空间 抽象: 机器代码-->微码编程-->高级语言 (语言的高下级的是根据语言是否被人类容易理解或者更接 ...

  7. POJ 3744 Scout YYF I(矩阵快速幂优化+概率dp)

    http://poj.org/problem?id=3744 题意: 现在有个屌丝要穿越一个雷区,雷分布在一条直线上,但是分布的范围很大,现在这个屌丝从1出发,p的概率往前走1步,1-p的概率往前走2 ...

  8. 【BZOJ】 3238: [Ahoi2013]差异

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3238 求:$${\sum _{i=1}^{n-1}\sum _{j=i+1}^{n}len ...

  9. pandas 处理数据中NaN数据

    使用dropna()函数去掉NaN的行或列 import pandas as pd import pickle import numpy as np dates = pd.date_range() d ...

  10. TDD、BDD、DDD

    TDDTest-Driven DevelopmentTest-Driven Development (TDD) is a software development technique where au ...