react配置路由
今天和朋友们分享react配置路由相关的知识，相信大家通过本文介绍也能对react项目路由配置有自已的收获和理解。自己轻松搞问题。
本文内容目录一览：
如何在react中添加路由之实操篇
首先，先来看看效果图
如上所示，点击About me ,到关于我的页面，点击Concact me，到联系我页面
再看看在服务端渲染的基础上改了什么东西
所有修改过的文件，新增的文件，一目了然，接下来一个个去看
用图片吧，一目了然
好了，由于篇幅，我们到下一篇再讲解到底做了什么
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 保存搜索字段。
React中路由操作、页面跳转
一般适用于，点击按钮或其他组件进行页面跳转，具体使用方式如下：
react-router-redux 中包含以下几个函数，一般会结合redux使用：
具体使用时通过发送disppatch来进行页面跳转：
一般在完成某种操作，需要返回上一个页面时使用。
首先定义路由为 :
点击事件跳转到新页面 打开一个新的tab：
在新的页面获取路径上的参数：
获取路径参数 :
或者
......未完 待更
以上就是react配置路由的全部内容了，文章比较长感谢您的耐心阅读，希望能帮到您，
