react使用路由白话版（适用于初学者）react-router-dom初级使用原创

原创

小哥 3年前 (2022-10-22) 阅读数 54 #大杂烩

1.安装

yarn add react-router-dom 或者 npm install react-router-dom

2.在app.js中引入

import {Link，Route,BrowserRouter} from react-router-dom

1)写入路由链接

<Link to="/about" >About

升级版单击以显示样式的名称默认是active 样式名称重定义atguigu 记得要！important 增加权重

2) 注册路由

3) 需在index.js在文件中直接引入

确保App在组件外部报告了一个。BrowserRouter或者HashRouter

import {BrowserRouter} from react-router-dom

3.布线组件和常规组件之间的区别。

4.解决时尚缺失的三种方法

5.精确匹配和模糊匹配

6. 默认情况下，将显示第一个检索到的

’ 重定向 ![](https://img-blog.csdnimg.cn/2021042111064059.png) 7.想要传送组件交付params 参数通过this.props获得分三步 ![](https://img-blog.csdnimg.cn/20210421113952493.png) 第一步：转移价值 ![](https://img-blog.csdnimg.cn/20210421113748288.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzczMTMzNTQ5OA==,size_16,color_FFFFFF,t_70) 第二步声明接收 ![](https://img-blog.csdnimg.cn/20210421113828240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzczMTMzNTQ5OA==,size_16,color_FFFFFF,t_70) 第三步在组件中接收 ![](https://img-blog.csdnimg.cn/20210421113420212.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzczMTMzNTQ5OA==,size_16,color_FFFFFF,t_70) ![](https://img-blog.csdnimg.cn/20210421113704736.png) 7.想要传送组件交付search 参数没有必要申报收据只需注册即可 ![](https://img-blog.csdnimg.cn/20210421114358285.png) 第三步接收search参数再localhost里也可以成为query参数 import qs from querystring ![](https://img-blog.csdnimg.cn/20210421114707236.png) ![](https://img-blog.csdnimg.cn/20210421114847165.png) ![](https://img-blog.csdnimg.cn/20210421114951641.png) 7.想要传送组件交付state参数传输参数隐藏在地址栏中。 1定义 ![](https://img-blog.csdnimg.cn/20210421115145335.png) 2.不需要申报，只需正常登记路线即可。 3.接收参数(刷新接收参数未丢失) ![](https://img-blog.csdnimg.cn/20210421115528745.png) ### 总结： 1.link 传参 ![](https://img-blog.csdnimg.cn/20210426134056462.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzczMTMzNTQ5OA==,size_16,color_FFFFFF,t_70) 2.单击事件以传输参数 ![](https://img-blog.csdnimg.cn/20210426140442142.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzczMTMzNTQ5OA==,size_16,color_FFFFFF,t_70) 3.一般组件如何具有布线组件。api使用withRouter方法 ![](https://img-blog.csdnimg.cn/20210426141436934.png)