我的脚手架版本如下:

"dependencies": {
"antd": "^3.21.4",
"jquery": "^3.4.1",
"lodash": "^4.17.15",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"@types/react": "^16.9.1",
"@types/react-dom": "^16.8.5",
"@types/react-router": "^5.0.3",
"ajv": "^6.2.1",
"css-loader": "^3.2.0",
"file-loader": "^4.2.0",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"source-map-loader": "^0.2.4",
"style-loader": "^1.0.0",
"ts-loader": "^6.0.4",
"typescript": "^3.5.3",
"url-loader": "0.5.8",
"webpack": "^4.39.1",
"webpack-cli": "^3.3.6"
}

  由于版本更新后,hashhistory不再通过react-router获得,所以添加一个新的react-router-dom

具体配置如下:

代码中如果跳转可以通过Link标签和history()的方式完成。代码如下:

1、Link标签

import { Link } from "react-router-dom";
<Link to='/' title='退出'></Link>

  带参数的自己去查一下把。

2、history()

  返回

this.props.history.goBack();

  跳转

this.props.history.push(`/main/agent/add/${editable}`);

跳转后的页面获取参数的方式:

let editable = eval(this.props.match.params['editable']);

 eval的目的是将json字符串转换成json对象。

React 版本16.9.0 中配置路由以及路由传参的更多相关文章

  1. 在 vSphere 5.x/6.0 中配置 Network Dump Collector 服务 (2002954)

    vmware KB: https://kb.vmware.com/s/article/2002954?lang=zh_CN 重点配置命令: 使用 vSphere Client 连接到 vCenter ...

  2. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  3. Vue Router路由导航及传参方式

    路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...

  4. vue-cli项目中使用全局过滤器及传参(日期格式化)

    // 过滤日期格式,传入时间戳,根据参数返回不同格式 const formatTimer = function(val, hours) { if (val) { ); var y = dateTime ...

  5. 7.ASP.NET MVC 5.0中的Routing【路由】

    大家好,这一篇向大家介绍ASP.NET MVC路由机制.[PS:上一篇-->6. ASP.NET MVC 5.0中的HTML Helpers[HTML帮助类] ] 路由是一个模式匹配系统,它确保 ...

  6. ASP.NET Core 3.0中使用动态控制器路由

    原文:Dynamic controller routing in ASP.NET Core 3.0 作者:Filip W 译文:https://www.cnblogs.com/lwqlun/p/114 ...

  7. 在.NET 6.0中配置WebHostBuilder

    大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在阅读第4章"使用Kestrel配置和定制HTTPS"时,您可 ...

  8. Vue-Cli 3.0 中配置高德地图

    vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存 ...

  9. 6.28笔记-servlet3.0注解配置、文件上传、过滤器、监听器

    一.servlet3.0注解配置 使用javaEE6.0 支持servlet3.0 value的值就是访问路径 urlPatterns的值也是访问路径 @WebServlet(name="D ...

随机推荐

  1. OpenGl函数库

    [OpenGL核心函数库] glAccum操作累加缓冲区glAddSwapHintRectWIN定义一组被SwapBuffers拷贝的三角形glAlphaFunc允许设置alpha检测功能glAreT ...

  2. 前端项目中公共方法汇总utils.js

    目录 判断手机类型IOS Android 格式化金钱 金钱字符串变回数字 用aa替换中文 并返回 去除文件后缀,得到文件名称(不带后缀) 获取浏览器类型(名称) post方式下载文件流 动态设置img ...

  3. Android-----CheckBox复选使用(实现简单选餐)

    直接上代码: xml布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmln ...

  4. FFMPEG SDK 开发介绍(原创)

    来源:http://blog.sina.com.cn/s/blog_62a8419a01016exv.html 本文是作者在使用ffmpeg sdk开发过程中的实际经验,现在与大家分享,欢迎学习交流. ...

  5. Mac OS 查看端口和杀死进程

    查看sudo lsof -i:port (端口号) sudo lsof -i:9501 COMMAND PID USER FD TYPE DEVICESIZE/OFF NODE NAME php 77 ...

  6. Shell 编程 case语句

    本篇主要写一些shell脚本case语句的使用. 字符判断 #!/bin/bash read -p "请输入一个字符:" char case $char in [a-z]|[A-Z ...

  7. 让Windows中的文件名支持大小写

    背景 最近在Linux官网下载了Linux内核,下载下来的是一个后缀为.tar.xz的压缩包,于是在毫不知情的情况下随随便便解压了,解压过程中出现了很多问题. 其中一个问题就是在Windows下,不区 ...

  8. manjaro手动安装Redis

    以前都是用的Windows系统,最近有被win10搞得有点烦,就入了manjaro的坑,windows下部分软件在manjaro安装记录,留个记录. 我的系统信息 下面开始正式干活. 一.准备步骤 下 ...

  9. 性能测试基础---LR关联2

    ·LR中的关联函数详解.在LR中,用于关联的函数一般有以下四个:web_reg_save_param 是通过字符串查找的方式来查找获取数据.web_reg_save_param_ex 是通过字符串查找 ...

  10. python中requests库get方法带参数请求

    起因是想爬五等分的花嫁的漫画.这是其中的一个坑 先上代码 data={ 'cid':567464, , 'key':'', 'language':1, 'gtk':6, '_cid':567464, ...