react table里跳转页面_react路由配置基础篇:react-router4.0及以上

随着react路由组件的不断升级,react-router4以下的版本和4以上的版本配置还是有一定的区别,这里就不累赘陈述了,笔者分享下使用react-router4.0以上版本的经验。

1562fc6ab818482735c58c5567ba52f3.png

1、安装react-router-dom

npm install react-router-dom --save

2、基本配置:在主入口文件App.js中添加如下代码。

ea71834866de9987a555c95d7a6dfc7b.png

效果如下:

9eb2df1b2c033d8bfa0be4add20e449f.gif

2、配置默认页面,例如404页面,需要在App.js中继续增加以下代码。

fb8658b88a2db21d09843ea3856dc000.png

效果如下:

a54275ada13bad16b5dcb55869c7774f.gif

3、不同页面间的参数传递,比如从页面A跳转至页面B,实现步骤如下:

3.1、在App.js中修改以下语句,其中“name?/:age?"”中的问号?表示参数可选;

330f62908b4f6ea56ffa8a95727d13f2.png

3.2、在A.js文件中通过标签实现页面跳转,并设置to属性。

5b7e9ec8a320b6aa4ec1a5a89a77bc8a.png

3.3、在B.js文件中接收A页面传递过来的参数,url中参数从this.props.match.params获取;

01635da09bd80ac0e5652b9dde5ae546.png

效果如下:

83484d80211fbe5a10536c69abb65943.gif

4、此时,可能有人会问:参数必须放在url中才能传递吗?答案:当然不是,还可以通过以下方式。

4.1、A.js

ddbadc98d4326eaaa2783b621d06db73.png

4.2、B.js

2529ce4371ff047b838f3715f8d97a68.png

效果如下:

d0b81ac5a85d855395e7e53dec6f21a1.gif

5、页面返回:使用 this.props.history.goBack(),效果如上图;

注:我会长期坚持分享我的开发经验和心得,期待阅读此文章的朋友能关注我的头条号,及时获取更新状态。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/538128.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cad怎么向下位移_CAD制图初学入门教程:阵列功能的使用技巧

阵列在浩辰CAD软件中也是比较常用的功能之一,但是有些CAD制图初学入门者对此并不是很了解。那么在浩辰CAD软件中阵列功能怎么用呢?接下来就给大家分享一些关于阵列功能的CAD制图初学入门技巧吧!首先在浩辰CAD软件中打开CAD图纸,然…

联想g470笔记本开vt_最“发泄”评测!飞刀铁拳暴力输出,联想本结局竟然大亮?(附视频)...

极果潮玩实验室迎来一块新的硬骨头——联想笔记本。喜欢来点新花样的小伙伴们听说它刚到不行,轻薄身板却很耐造,于是大家都想和它较量一番,看看是什么样的刚猛让这款产品名声在外。本期评测还是本着不走寻常路的风格,看看我们为它…

【leetcode】590. N-ary Tree Postorder Traversal

题目如下: 解题思路:凑数题2,做完先序做后序。凑数博2。 代码如下: class Solution(object):def postorder(self, root):""":type root: Node:rtype: List[int]"""if root None:return []res []s…

dubbo控制台安装

为什么要安装这个控制台? 当我们的服务很多的时候,需要监管,查看,当项目变大的时候,会深深感谢它! 管理原理 对注册中心Zookeeper中注册的服务进行管理 安装步骤 1、下载dubbo源码,要与使用的…

dubbo服务的运行方式

1、使用Servlet容器运行(Tomcat、Jetty等)----不可取 缺点:增加复杂性(端口、管理) 浪费资源(内存) 假设1个服务模块时,需要1台tomcat,消耗3个端口,和200M…

插件translator_Zotero Jasminum 插件的更新记录

Jasminum 插件发布后 林知:简单的Zotero CNKI 中文插件​zhuanlan.zhihu.com受到一些同学的关注,同时也收到许多反馈。我写这个插件的初衷就是想让大家在Zotero上能更方便的使用知网,尤其是人文社科相关专业的同学,他们尤其依赖中…

ubuntu18.04 用xhell连接失败

ifconfig命令有用之后,又发现xhell连接不上ubuntu18.04版本的虚拟机,原因是ubuntu18.04默认没有安装ssh服务。 使用以下命令安装 sudo apt-get install openssh-server 安装完成后,启动ssh服务 sudo /etc/init.d/ssh start 查看ssh进程,若出现…

伍德里奇计量经济学第五版第四章计算机操作,伍德里奇计量经济学第四章

伍德里奇计量经济学第四章2016年10⽉25⽇ 星期⼆ 下午10:21 Page 1User: ⺩建英name: log: /Users/wangjianying/Desktop/Chapter 4 Computer exercise.smcllog type: smclopened on: 25 Oct 2016, 22:20:411. do "/var/folders/qt/0wzmrhfd3rb93j2h5hhtcwqr0000gn/T//SD1…

使用maven构建dubbo服务的可执行jar包

maven 项目结构 <build><!-- 使用dubbo推荐的方法&#xff0c;打包成jar&#xff0c;调用main方法启动 --><finalName>admin-service-user</finalName><resources><resource><targetPath>${project.build.directory}/classes</ta…

Linux的标准I/O和管道

标准输入输出与管道 1、标准输入和输出程序&#xff1a;指令数据指令&#xff1a;计算、加减乘除数据&#xff1a;输入数据、输出数据2、在Linux中每一个打开的文件都会分配一个当前进程中唯一的文件描述符&#xff0c;用来标识文件的状态fd:file descripor3、Linux提供给程序…

页面url带参数_微信小程序云开发教程微信小程序的JS高级页面间数据传递

同学们大家好&#xff0c;我是小伊同学&#xff0c;上一节课我们讲解了全局数据的读写方法&#xff0c;那么在页面间同样需要数据交互&#xff0c;今天我们就来学习这部分内容。在微信小程序中&#xff0c;我们常常需要将数据在页面之间进行传递&#xff0c;比如用户的身份信息…

OpenGL——二维几何变换

平移、旋转、缩放的实现 #include<iostream> #include <math.h> #include<Windows.h> #include <GL/glut.h>using namespace std;GLsizei winWidth 600, winHeight 600;GLfloat xwcMin 0.0, xwcMax 225.0; GLfloat ywcMin 0.0, ywcMax 225.0;cla…

在Eclipse 中打开当前文件夹

原文连接&#xff1a;https://www.cnblogs.com/panie2015/p/5985053.html ------------------------------------------------------------------------ 最近试过好多次&#xff0c;安装插件来 在Eclipse 中打开当前文件所在文件夹&#xff0c;结果总是不甚如意。 烦躁了&…

服务器应用日志清理,Linux下Tomcat日志定期清理

服务器上的tomcat的catalina.out文件越来越大&#xff0c;查看起来很不方便&#xff0c;以前每次都是想起来的时候手工清理一下(cat /dev/null > catalina.out)&#xff0c;后来发现了logratate这个工具&#xff0c;Ubuntu下的mysql,nginx好像也是用的这个工具还定期整理log…

dubbo简易监控中心安装

dubbo简易监控中心也是dubbo服务应用。 为什么叫“简易”&#xff1f;这是阿里巴巴定义的&#xff0c;意思是功能不多但够用&#xff0c;可以自己扩展。 1、下载dubbo源码&#xff0c;要与使用的dubbo版本一致。 https://github.com/alibaba/dubbo/releases 2、maven instal…

前端架构设计1:代码核心

现在的前端领域, 随着JS框架, UI框架和各种库的丰富, 前端架构也变得十分的重要. 如果一个大型项目没有合理的前端架构设计, 那么前端代码可能因为不同的开发人员随意的引入各种库和UI框架, 导致代码量变得异常臃肿, 最终结果可能是代码变得无法维护, 页面性能低下,不得已只能推…

如何用法向量求点到平面距离_支持向量机(SVM)

最近完成的一个项目用到了SVM&#xff0c;之前也一直有听说支持向量机&#xff0c;知道它是机器学习中一种非常厉害的算法。利用将近一个星期的时间学习了一下支持向量机&#xff0c;把原理推了一遍&#xff0c;感觉支持向量机确实挺厉害的&#xff0c;尤其是核函数变换可以把一…

TortoiseSVN 1.9.5安装 与 Eclipse4.4.2中安装SVN插件 图解详解

原文链接&#xff1a;http://blog.csdn.net/chenchunlin526/article/details/54631458 Eclipse svn 插件官网&#xff1a;http://subclipse.tigris.org/ Eclipse svn 插件更新网站&#xff1a;https://github.com/subclipse/subclipse/wiki -------------------------------…

虚拟服务器关机返回用户信息,在Linux服务器关机前向用户显示一条自定义消息...

在先前的文┞仿中&#xff0c;我们说清楚明了 Linux 中 shutdown、poweroff、halt、reboot 敕令的不合之处&#xff0c;并揭示了在用不合的选项履行这些敕令时它们实际做了什么。# shutdown 13:25本篇将会向你展示如安在体系关机时向所有的体系用户发送一条自定义的消息。建议浏…

eclipse svn不能忽略文件及文件夹,ignore设置无效 ?

SVN这块做得不好&#xff0c;如果之前提交过此文件&#xff0c;就不能设置忽略该文件了。所以第一次提交的时候要搞清楚再提交。 【 亲测&#xff0c;的确如此&#xff0c;用 Windows -> Preferences -> Team -> Ignored Resources 方法不行。 项目右键--team--设置…