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

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

1、安装react-router-dom

npm install react-router-dom --save

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

效果如下：

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

效果如下：

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

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

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

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

效果如下：

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

4.1、A.js

4.2、B.js

效果如下：

5、页面返回：使用 this.props.history.goBack()，效果如上图；

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

react table里跳转页面_react路由配置基础篇：react-router4.0及以上相关推荐

react table里跳转页面_如何在react中实现一个table切换？
废话不说,直接贴代码,供新手参考 export default class TabComponent extends Component { constructor(props){ super(pro ...
Vue入坑——vue-router单页面多路由配置
2019独角兽企业重金招聘Python工程师标准>>> 上一篇:vue-router如何传递参数一起学vue--vue学习总路线 ----------^~^我是萌萌哒分割线^~^- ...
若依框架添加静态页面，路由配置
若依框架是一套开源框架,先建数据表结构,然后可以快速生成增删查改的一套代码.但是涉及到统计分析,花里胡哨的自定义页面,如何添加呢?自己总是忘记,所以现在记录一下. 1.项目部署好,启动起来,在浏览器里 ...
销售易CRM----SFA配置基础篇
@销售易CRM 系列文章目录销售易CRM----SFA篇提示:由于销售易CRM产品不断在更新迭代,部分内容可能会随着系统的升级会出现差异,仅供参考(该文章更新于2022.1.10). 文章目录系 ...
webpack 配置react脚手架（四）：路由配置
1. 由于 react-router 是集成了 react-router-dom 和 react-router-native的一起的,所以这里要使用的是 react-router-dom, 2. 安装 ...
SAP 电商云 Spartacus UI product 明细页面的路由配置
如果直接访问如下 url: http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT- ...
hitchhiker部署_《 Hitchhiker的React Router v4指南》：路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
react如何刷新当前页面_react怎么强制刷新页面？
react强制页面刷新使用this.forceUpdate() 在react中,state和props数据更新,就会重新render,但是当层级过深时,可能就不会触发渲染,这时候就要用到this.f ...
native react 常用指令_React Native入门基础篇(一)
学习一次,随处书写.(以下文字来自各大网上资料整理而来,侵删!) 概述使用React为Android和iOS创建本机应用 React Native将本机开发的最佳部分与React(用于构建用户界面的 ...

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

react table里跳转页面_react路由配置基础篇：react-router4.0及以上相关推荐

最新文章

热门文章