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,一经查实,立即删除!

相关文章

Caused by: java.lang.ClassNotFoundException: javax.servlet.jsp.jstl.core.LoopTag

明明引入了 jstl&#xff0c;为什么还报错&#xff1f; 原来引入的不对。 错误的引入&#xff1a; <dependency><groupId>javax.servlet.jsp.jstl</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency&…

jade的写法

标签直接写&#xff1a;p或p. 例如&#xff1a; p 今天自己很棒p.今天自己很棒则输入 <p>今天自己很棒</p><p>今天自己很棒</p>***jage模板记得需要书写规范&#xff0c;需要空两个空格。 jage变量调用 jade 的变量调用有 3 种方式 # {表达式} 表达式!…

计算机论文答辩2分钟演讲稿,毕业答辩发言稿三分钟

论文答辩是一种比较正规的审查形式&#xff0c;有组织、有准备、有鉴定、有计划的。答辩会由校方、答辩委员会还有答辩者组成。小编在此献上毕业答辩开场白&#xff0c;希望大家喜欢。毕业答辩发言稿三分钟1:各位老师&#xff0c;上午好!我叫赵晓琦&#xff0c;是土木工程0801班…

Zookeeper单机安装

1、 修改操作系统的/etc/hosts 文件中添加&#xff1a; 2、 下载zookeeper 3、 解压zookeeper 安装包&#xff1a; $ tar -zxvf zookeeper-3.4.6.tar.gz 4、 在/home/zengmg/zookeeper-3.4.6 目录下…

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

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

设置zookeeper开机自启动

原文连接&#xff1a;http://blog.csdn.net/u012453843/article/details/70162796 -------------------------------------------------------两种方式可以实现开机自启动 第一种&#xff1a;直接修改/etc/rc.d/rc.local文件 在/etc/rc.d/rc.local文件中需要输入两行&#xff0…

怎样查找html概念,HTML一般概念_html

■ html 一般概念&#xff1a;这节将简单介绍 HTML。全称&#xff1a;HyperText Mark-up Language译称&#xff1a;超文本标记语言。简意&#xff1a;一种为普通文件中某些字句加上标识的语言&#xff0c;其目的在于运用标记(tag)合文件 达到预期的效果。HTML 是在 SGML 定义下…

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

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

linux安装telnet

一.检查1、[rootlocalhost ~]# telnet bash: telnet: command not found 2、 查询了是否安装Telnet包&#xff0c;结果如下&#xff1a; [rootlocalhost ~]# rpm -qa telnet* telnet-server-0.17-47.el6.i686 3、又查询了xinetd的状态&#xff1a; [rootlocalhost ~]# service …

Linux里的21究竟是什么

原文连接&#xff1a;http://blog.csdn.net/ggxiaobai/article/details/53507530 --------------------------------------------------------- 我们在Linux下经常会碰到nohup command>/dev/null 2>&1 &这样形式的命令。首先我们把这条命令大概分解下首先就是一个…

安阳师范学院计算机与信息工程学院吴琴霞,基于甲骨文字形动态描述库的甲骨文输入方法...

【摘要】该文分析了目前常用的甲骨文字在编码和输入方面的问题和不足,给出了一种甲骨文字形动态描述的方法.该方法在现代汉字的编码和书写规范基础上,使用有向笔段和笔元对甲骨文进行描述,用扩展的编码区域和外部描述字形库相结合的方式,解决了甲骨文字特别是异体字和没有识别的…

【leetcode】590. N-ary Tree Postorder Traversal

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

dubbo控制台安装

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

Js中的基本概念

前言&#xff1a;刚毕业的应届生&#xff0c;学习前端时间并不长&#xff0c;昨天参加面试&#xff0c;一轮笔试&#xff0c;两轮技术面试。尤其在技术面试的时候感觉到自己基础知识还是搞的有些乱&#xff0c;也突然明白到了一个扎实的Js基础对于之后的路是有多重要。准备把Js…

oracle 查询时间点数据_oracle统计时间段内每一天的数据(推荐)

下面给大家介绍oracle统计时间段内每一天的数据&#xff0c;具体sql语句如下所示&#xff1a;1. 生成1000个随机数SELECT ROWNUM RN,DBMS_RANDOM.VALUE(0, 1000) RANDOMFROM DUALCONNECT BY ROWNUM < 1000;注&#xff1a;DBMS_RANDOM.VALUE(A, B)是随机数产生函数, A是区间的…

dubbo服务的运行方式

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

Java读取HTML传人文件,java读取html文件并获取body中所有的标签及内容的案例.pdf

java读读取取html文文件件,并并获获取取body中中所所有有的的标标签签及及内内容容的的案案例例这里的获取的是html文件中body 中的所有标签以及内容package com.lmt.service.file;import java.io.BufferedReader;import java.io.File;import java.io.FileInputStream;import j…

插件translator_Zotero Jasminum 插件的更新记录

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

Tomcat的三个端口

8005 <Server port"8005" shutdown"SHUTDOWN"> 关闭tomcat通信接口 8009 <Connector port"8009" protocol"AJP/1.3" redirectPort"8443"/> 与其他http服务器通信接口&#xff0c;用于http服务器集合 8080…

计算机一级考试word题主要,2017年计算机一级考试word题及答案

1 / 7 2017 年计算机一级考试 及答案 计算机还是人们的学习工具和生活工具。借助家用计算机、个人计算机、计算机网、数据库系统和各种终端设备&#xff0c;那么 2017 年计算机一级考试 及答案有哪一些 ?下面是 才小编收集整理的 2017 年计算机一级考试 及答案&#xff0c;欢迎…