随着react路由组件的不断升级,react-router4以下的版本和4以上的版本配置还是有一定的区别,这里就不累赘陈述了,笔者分享下使用react-router4.0以上版本的经验。
![88c2935c4ac4a998600e5b3b214af84f.png](https://i-blog.csdnimg.cn/blog_migrate/96476d0559fbd5a24323287183910c19.jpeg)
1、安装react-router-dom
npm install react-router-dom --save
2、基本配置:在主入口文件App.js中添加如下代码。
![3b013fb78b1aa5ed96a1972e15f8ccc7.png](https://i-blog.csdnimg.cn/blog_migrate/87eb41d3f203cd832d7eea7bf7d60fe0.jpeg)
效果如下:
![35ac61f043fdd2c10fef2317a393c8e8.gif](https://i-blog.csdnimg.cn/blog_migrate/3b0465e7974e17dff1b23ef2afde265c.gif)
2、配置默认页面,例如404页面,需要在App.js中继续增加以下代码。
![80a4a510e651fa9506bc9436498829e8.png](https://i-blog.csdnimg.cn/blog_migrate/c037865c856674739c28dfd7dbdbe1c2.jpeg)
效果如下:
![27b36e7bafa89b3a3984e9d8af1e03c9.gif](https://i-blog.csdnimg.cn/blog_migrate/089a5ffca504bc30ec6551b640f2a555.gif)
3、不同页面间的参数传递,比如从页面A跳转至页面B,实现步骤如下:
3.1、在App.js中修改以下语句,其中“name?/:age?"”中的问号?表示参数可选;
![f473ddef6052d45328a604aa17a3f7a5.png](https://i-blog.csdnimg.cn/blog_migrate/c2f39d43457adf2c5d7b83d73425475d.jpeg)
3.2、在A.js文件中通过标签实现页面跳转,并设置to属性。
![f0b66cf3fa0f4410809f1fccef9e57ab.png](https://i-blog.csdnimg.cn/blog_migrate/a287db3b986292e4e5d53120fc9f882b.jpeg)
3.3、在B.js文件中接收A页面传递过来的参数,url中参数从this.props.match.params获取;
![d97bfb10f8fbe2a3fb6c5000a8f085a8.png](https://i-blog.csdnimg.cn/blog_migrate/d79e3e642e3b68b1fbbc8b676e6b1382.jpeg)
效果如下:
![2d33dbf36dad717d98b3957f7078eb08.gif](https://i-blog.csdnimg.cn/blog_migrate/25fb2a6a539d2d621c041b57c227b01d.gif)
4、此时,可能有人会问:参数必须放在url中才能传递吗?答案:当然不是,还可以通过以下方式。
4.1、A.js
![42696116f61fa02b548b591e90cd6b64.png](https://i-blog.csdnimg.cn/blog_migrate/0ecb28a3d97fb51908e9529a3ead00db.jpeg)
4.2、B.js
![871f292441f64a8c3358f1a112b38fb3.png](https://i-blog.csdnimg.cn/blog_migrate/c3d5bd7f59ee7584013c364049664f9a.jpeg)
效果如下:
![0f4388d61fcac6cabbea3038c768e1eb.gif](https://i-blog.csdnimg.cn/blog_migrate/4e0e7d07885111ed411ec23f7de852d5.gif)
5、页面返回:使用 this.props.history.goBack(),效果如上图;
注:我会长期坚持分享我的开发经验和心得,期待阅读此文章的朋友能关注我的头条号,及时获取更新状态。