react 获取url参数_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()，效果如上图；

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