React 版本16.9.0 中配置路由以及路由传参
我的脚手架版本如下:
"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 中配置路由以及路由传参的更多相关文章
- 在 vSphere 5.x/6.0 中配置 Network Dump Collector 服务 (2002954)
vmware KB: https://kb.vmware.com/s/article/2002954?lang=zh_CN 重点配置命令: 使用 vSphere Client 连接到 vCenter ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- Vue Router路由导航及传参方式
路由导航及传参方式 一.两种导航方式 ①:声明式导航 <router-link :to="..."> ②:编程式导航 router.push(...) 二.编程式导航参 ...
- vue-cli项目中使用全局过滤器及传参(日期格式化)
// 过滤日期格式,传入时间戳,根据参数返回不同格式 const formatTimer = function(val, hours) { if (val) { ); var y = dateTime ...
- 7.ASP.NET MVC 5.0中的Routing【路由】
大家好,这一篇向大家介绍ASP.NET MVC路由机制.[PS:上一篇-->6. ASP.NET MVC 5.0中的HTML Helpers[HTML帮助类] ] 路由是一个模式匹配系统,它确保 ...
- ASP.NET Core 3.0中使用动态控制器路由
原文:Dynamic controller routing in ASP.NET Core 3.0 作者:Filip W 译文:https://www.cnblogs.com/lwqlun/p/114 ...
- 在.NET 6.0中配置WebHostBuilder
大家好,我是张飞洪,感谢您的阅读,我会不定期和你分享学习心得,希望我的文章能成为你成长路上的垫脚石,让我们一起精进. 在阅读第4章"使用Kestrel配置和定制HTTPS"时,您可 ...
- Vue-Cli 3.0 中配置高德地图
vue 中使用高德地图有两种方式 一.vue-amap 组件 官网: https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的,但是尝试之后存 ...
- 6.28笔记-servlet3.0注解配置、文件上传、过滤器、监听器
一.servlet3.0注解配置 使用javaEE6.0 支持servlet3.0 value的值就是访问路径 urlPatterns的值也是访问路径 @WebServlet(name="D ...
随机推荐
- python的new与init
基于文章:Why is init() always called after new()? 特别说明: 这篇文章的灵感来源于stackoverflow的一个提问,准确说,我只是做了些知识梳理的工作,对 ...
- 前端工程师拿到全新的 Mac 需要做哪些准备
最近苹果退出了新款 Mac,用了3年15款Pro之后,终于盼到18款的降价,于是含泪更新换代 但是每次换电脑,重装环境的好多东西记不清,于是记个笔记 一.终端 安装 zsh sh -c "$ ...
- Nginx配置多域名代理
目的 当我们有多个站点需要对外网开放,每个站点的域名都不一样,然而我们只有一个外网ip.这种情况下,我们就可以使用一个Nginx来配置多域名代理.这种代理方式可以解决,在同一个端口上针对不同域名代理不 ...
- es数据二次开发统计展示
案例1 在es查询中按照多列分组的时候 分组列的count值会越来越少 es默认隐藏了没有被分组匹配到的记录数 需要在查询的时候开启 2.开启显示没有被分组成功的记录 分组成功的记录加上分组miss ...
- Linux下设置Nginx开机自启
1.本地环境 [root@dev ~]#cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core) 2.在/etc/init.d创建ngi ...
- 【Spring Boot】Spring Boot之利用Logstash将日志转换成以JSON的格式存储和输出
一.Logstash的作用 Logstash是一个完全开源的工具,它可以对日志进行收集.过滤,能非常方便地将日志转换成以JSON的格式存储和输出,并将其存储供以后使用. 二.整合Logstash的步骤 ...
- 【Spring Cloud】Spring Cloud之Spring Cloud Sleuth,分布式服务跟踪(1)
一.Spring Cloud Sleuth组件的作用 为微服务架构增加分布式服务跟踪的能力,对于每个请求,进行全链路调用的跟踪,可以帮助我们快速发现错误根源以及监控分析每条请求链路上的性能瓶颈等. 二 ...
- 洛谷 P3071 [USACO13JAN]座位Seating(线段树)
P3071 [USACO13JAN]座位Seating 题目链接 思路: 一开始把题给读错了浪费了好多时间呜呜呜. 因为第二个撤离操作是区间修改,所以我们可以想到用线段树来做.对于第一个操作,我们只需 ...
- ECHO命令输出空行的11种方法和效率
标题: 批处理技术内幕:ECHO命令作者: Demon链接: http://demon.tw/reverse/cmd-internal-echo.html版权: 本博客的所有文章,都遵守“署名-非商业 ...
- CF472G Increase the Constraints
Increase the Constraints 定义两个等长的01字符串的汉明距离为它们字符不同的对应位置的个数. 给你两个01串S,T,现在有q个询问,每次指定S,T中两个定长的子串询问它们的汉明 ...