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 ...
随机推荐
- 20145127《java程序设计》第八周学习总结
一.教材学习内容总结 第十四章 NIO与NIO2 NIO(New IO)-from JDK1.4 NIO2 -from Java SE 7 14.1 认识NIO Channel: 衔接数据节点(与IO ...
- 20145322 Exp5 Adobe阅读器漏洞攻击
20145322 Exp5 Adobe阅读器漏洞攻击 实验过程 IP:kali:192.168.1.102 windowsxp :192.168.1.119 msfconsole进入控制台 使用命令为 ...
- Spring DBCP用xml和properties2种格式配置DataSource
Spring提供数据库连接池:DBCP配置DataSource并且获取连接完成数据库操作: Spring帮助文档的地址: http://static.springsource.org/spring/d ...
- cmd解释
cmd是command的缩写.即命令提示符(CMD),是在OS / 2 , Windows CE与Windows NT平台为基础的操作系统(包括Windows 2000和XP中, Vista中,和Se ...
- 解决gvim中php函数提示php_funclist.dict无法生效的问题
在Windows中, 当打开php文件时, 提示 dicvim(setlocal) unknown option: Files\Vim\vimfiles\dict\php_funclist.dict ...
- 批量启动application pool
在powershell中执行 Get-ChildItem IIS:\AppPools | where {$_.state -eq "Stopped"} | Start-WebApp ...
- 51nod 1232 完美数 数位dp
1232 完美数 题目来源: 胡仁东 基准时间限制:2 秒 空间限制:131072 KB 如果一个数能够被组成它的各个非0数字整除,则称它是完美数.例如:1-9都是完美数,10,11,12,101都 ...
- python 数据交换
例1 def change(data): data[],data[]=data[],data[] print('函数内交换位置后:') ): print('data[%d]=%3d' %(i,data ...
- python 操作浏览器打开指定网页
#! /usr/bin/env python # encoding=utf8 import webbrowser import time webbrowser.open("http://ww ...
- Excel表格的导入导出
Excel文件的组成: 01.一个Excel文件由N个Sheet组成的 02.一个Sheet由N个Row组成 03.一个Row由N个Cell组成 需求: 把内存中的数据 写入到指定的excel表格中! ...