react路由配置
如果您想让您的路由器连接更加稳定和快速，本文react路由配置将为您提供适用于不同情况的路由器设置方法和使用技巧。
本文目录一览：
react如何获取路由，以及如何进行路由跳转并传参，以及接收
1.获取路由 this.props.location.pathname
2.进行路由跳转 this.props.history.push({pathname :"/meet"})
3.获取动态路由参数 this.props.match.params.users
路由传参 this.props.history.push({pathname :"/device/list",query:{data:item})
接收路由传过去的参数 const {data}=this.props.location.query;
react路由
一、React路由： 实现单页应用的核心技术（单页应用 简称SPA）
路由原理参考资料：
二、React路由实现有两个包：
官网：
官方github:
中文路由文档：
三、React-router-dom具体使用
Route:视图展示 区 相当于vue中的router-view
Link:要跳转的指令 相当于vue中的router-link
步骤：
1.引入所需的包：
2.用Link指令指令要跳转的路径
例如：
3.指定在哪个区域显示视图
例如：
4.如何指定高亮
例如：
可以通过activeClassName指定高亮类的样式，如果不指定activeClassName，可以直接使用active类名即可
5.路由传参
Reacr UI库 antd: 阿里
文档
React 路由使用
react-router-dom 是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中：
使用路由时需要为组件指定一个路由的 path ，最终会以 path 为基础，进行页面的跳转。具体使用先看个简单示例，该示例比较简单就是两个 Tab 页面的来回切换。
最终交互时，上述路由配置会出现彼此覆盖的情况，如下图：
为了保证 App 组件，不会在 Tab1 和 Tab2 切换时被覆盖需要使用嵌套路由。
嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此 React 提供了 Outlet 组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。
Outlet 渲染一个子路由的元素
最终效果如下图：
通过 path='*' ,实现没有其他路由匹配时，对其进行匹配。
效果如图：
通过路由传递参数到组件中
最终效果：
当我们切换至 Tab1 再切回 Tab2 后，笔记详情页面将空白，效果如下：
可以通过索引路由填补空白，具体只需：
如此当我们重复上述操作时便会呈现如下效果：
当父路由匹配，但其他子路由都不匹配时，由索引路由匹配。索引路由是父路由的默认子路由。
当用户尚未单击导航列表中的一项时，会呈现索引路由。
与 Link 功能一致，差异是可以设置点击后的颜色
搜索参数类似于 URL 参数，形如 /login?success=1
随着我们输入 apple , 路由的地址将变为 /Tab2?text=apple 触发路由重新呈现。
当我们在输入框输入字符时，便会触发列表的过滤显示：
上述UI在交互过程中，当我们点击 Tab1 和 Tab2 进行切换时，或者点击 apple 或 appet 时，会出现输入框被清空，且列表不再被过滤的问题。
react-router 提供了 useLocation 方法，它返回浏览器显示的 url 信息。通过它可以获取浏览器 url 中的搜索参数，从而进行暂存，在具体组件内，可以通过 useSearchParams 获取到暂存的值。具体方式，通过自定义组件包装 NavLink 或 Link 来实现。
上述示例中，路由的切换采用 Link 或者 NavLink ，但当我们的页面元素不使用 Link 时，比如使用 Button ，此时便需要使用采用 useNavigate 。同上可以配合 useLocation 保存搜索字段。
无线网络已经成为现代人不可或缺的一部分，而本文所提供的设置方法和技巧，可以让你更好地掌握网络，享受便利。
