react-router5.x 的配置及其页面跳转方法和js跳转方法

https://blog.csdn.net/sinat_37255207/article/details/90745207

上次用react-router 的时候还是3.x 很久不用已经到react-router5.x 了

废话不多说上代码

配置

react: ^16.8.6,

react-dom: ^16.8.6,

react-router: ^5.0.0,

react-router-dom: ^5.0.0,

import {HashRouter as Router,Route,Link,BrowserRouter  ,Switch,Redirect} from 'react-router-dom';....
<Router><Link to="/a" style={{color:'black'}}><div>点击跳转到a</div></Link><Link to="/b" style={{color:'black'}}><div>点击跳转到b</div></Link><Route exact path='/' component={App1}/><Route path='/a' component={App1}/><Route path='/b' component={App2}/></Router>

js 跳转方法

import { createHashHistory,createBrowserHistory } from 'history'; // 是hash路由 history路由 自己根据需求来定

const history = createHashHistory();...history.push('/a');
...

转载于:https://www.cnblogs.com/tianmiaogongzuoshi/p/10965062.html

react-router5.x 的配置及其页面跳转方法和js跳转方法相关推荐

iframe-父子-兄弟页面相互传值(jq和js两种方法)
参考文章: http://blog.csdn.net/u013299635/article/details/78773207 http://www.cnblogs.com/xyicheng/archi ...
防止自建控件与页面间重复引入客户端js脚本的方法
我们在创建自定义的服务器端控件或是用户控件时,经常需要用到一些客户端js脚本,通常将其作为资源嵌入,并在页面后台代码中添加引用,但是如若用到一些通用的js库(比如JQuery)时,就免不了产生一个疑问 ...
移动端H5页面ios不支持原生js的alert方法解决办法
1.cont:要弹出的语言,millisecond:毫秒数 function Toast(cont,millisecond){ millisecond=isNaN(millisecond)?3000: ...
php 中js跳转页面跳转页面,js跳转代码_PHP页面跳转 Js页面跳转代码
摘要腾兴网为您分享:PHP页面跳转 Js页面跳转代码,自动刷宝,中信金通,携程抢票,未来屋等软件知识,以及沃金汇,沃行讯通,securecrt.exe,我的世界变形金刚mod,一票通,农场小分队,手 ...
webpack4+react配置多页面移动端应用程序
webpack4+react配置多页面移动端应用程序前言技术栈项目目录结构移动端适配方案 webpack配置基础配置开发环境配置 react+redux热重载生产环境配置 .babelr ...
怎么通过id渲染页面_「快页面」动态配置化页面渲染器原理介绍
引言「快页面」是知乎内部一个快速搭建后台管理页面的平台,使用者仅用半小时即可将一个常规复杂度的后台页面开发完成. 「快页面」平台的基石是它的「渲染器」,一个能将 JSON 配置渲染成页面的 Reac ...
web.xml配置错误页面，及输出错误信息
转自:https://blog.csdn.net/bao19901210/article/details/23370407 1.需要在web.xml中配置相关信息 1 <!-- 默认的错误处理页 ...
vue cli 添加html,vue-cli创建的项目,配置多页面的实现方法
vue官方提供的命令行工具vue-cli,能够快速搭建单页应用.默认一个页面入口index.html,那么,如果我们需要多页面该如何配置,实际上也不复杂假设要新建的页面是rule,以下以rule为例 ...
react native利用webvView嵌入h5页面以及RN与webView的通信
前言:这边主要是记录下,在react native中如何使用h5页面,以及h5页面发生点击,或者跳转到react native时,如何与react native进行通信. 一.react native ...

react-router5.x 的配置及其页面跳转方法和js跳转方法

react-router5.x 的配置及其页面跳转方法和js跳转方法相关推荐

最新文章

热门文章