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 ...
随机推荐
- 04: 事件驱动、五种I/O操作、I/O多路复用select和epoll
网络编程其他篇 目录: 1.1 事件驱动 1.2 五种I/O操作 1.3 I/O 多路复用之select.poll.epoll详解 1.1 事件驱动返回顶部 1.什么是事件驱动 定义:就是根据不同事 ...
- amin例子的简单研究
amin这个例子,使用了比较复杂高阶的qml技巧,但是也有局限性.下面分3个部分,分别是界面部分,算法部分和扩展部分,简单地对这个问题进行理解. 由衷感谢:http://amin-ahm ...
- vijos 运输计划 - 二分答案 - 差分 - Tarjan
Description 公元 2044 年,人类进入了宇宙纪元.L 国有 n 个星球,还有 n−1 条双向航道,每条航道建立在两个星球之间,这 n−1 条航道连通了 L 国的所有星球.小 P 掌管一家 ...
- ubuntu下交叉编译imagemagick
环境:ubuntu16.04 交叉编译器版本号:4.8.3 在编译之前要编译以下其依赖的软件或库:freetype,libpng,libxml2,libtiff,libjpeg,zlib,graphv ...
- mysql 通过binlog 查看执行日志
环境:linux deepin15.7 mysql 5.7 1.开启binlog vim /etc/mysql/mysql.conf.d/mysqld.cnf 添加 log_bin = /var/ ...
- url rewrite导致的500.19 0x8007000d
https://stackoverflow.com/questions/13532447/http-error-500-19-iis-7-5-error-0x8007000d It seems you ...
- [NLP/Attention]关于attention机制在nlp中的应用总结
原文链接: https://blog.csdn.net/qq_41058526/article/details/80578932 attention 总结 参考:注意力机制(Attention Mec ...
- ovs-ofctl: s1 is not a bridge or a socket 解决方法
参考: ovs-vsctl: Error detected while setting up bridge ovs-ofctl: s1 is not a bridge or a socket 解决方法 ...
- C# 集合-并发处理-锁OR线程 (转载)
每次写博客,第一句话都是这样的:程序员很苦逼,除了会写程序,还得会写博客!当然,希望将来的一天,某位老板看到此博客,给你的程序员职工加点薪资吧!因为程序员的世界除了苦逼就是沉默.我眼中的程序员大多都不 ...
- c语言 数组合并
#include<stdio.h> int main() { int m,n,i,j,k; printf("Enter no. of elements in array1:\n& ...