react官网链接 ： zh-hans.react.dev/ ；
1.基本概念
React Router 是一个用于 React 应用的路由库。它使得在单页应用（SPA）中能够实现多页面的导航。通过 React Router，可以轻松地在不同的 URL 路径之间切换，根据路由映射关系显示相应页面，从而创建具有多页面效果的单页应用。
2.路由定义方式及懒加载
为了便于维护，单独建立文件，定义routers数组，结合useRoutes钩子函数，可以建立起项目的路由映射关系
需要注意，对于嵌套路由页面的展示，需要在页面中使用 Outlet标签占位，效果相当于vue中的
另外，当项目包含多个页面和路由时，如果在初始加载时就加载所有路由，会导致初始加载时间变长，并且用户可能只访问其中的一小部分页面。这样就造成了资源浪费和性能下降。这时可以使用路由懒加载可以将路由组件按需加载，只有在用户访问到对应的路由时才进行加载。这样可以减少初始加载时间，提升用户体验，同时也节省了不必要的资源消耗。
在react中使用路由懒加载的方式
3.路由跳转方式
3.1.声明式导航（Link标签）
Link标签用于在应用中创建链接，这些链接指向不同的路由（即 URL 路径）。当用户点击链接时，会触发页面跳转。
相当于 <a> 标签，也相当于 Vue 中的 <router-link></router-link>
3.2.编程式导航 （useNavigate）
这种方式的好处是，你可以在进行路由跳转前，进行一些额外的操作，具体使用需要结合到useNavigate这个钩子函数
const navigate = useNavigate();
navigate('/home') 相当于组件中 Go to Home
4.路由传参
路由传参是指在进行页面导航时，将数据从一个页面传递到另一个页面的过程。在 React 中，这通常通过 URL 参数、查询字符串或通过状态对象（state）来实现。这 样可以在导航过程中传递需要的附加信息，使目标页面能够基于这些参数展示特定的数据或进行特定的操作。
4.1 params参数
第一步：路由定义时使用占位符接收params参数
第二步： 跳转并携带参数
第三步：接收并读取参数
4.2 search参数
跳转并传递search参数
页面接收
4.3 state参数
跳转并传递state参数
页面接收
4.4 高阶函数整合路由参数
通常，组件都有可能需要获取各种路由参数以及进行路由跳转，如果每个组件都需要书写一遍钩子函数去获取就显得有点麻烦，我们可以自己实现一个高阶组件，这个高阶组件内部会收集各种路由参数以props参数的形式传递给被包裹的组件，同时也集成了路由跳转功能，有点类似于react Router V5中的WithRouter。
具体实现如下：
5.路由拦截
在 Vue中 ，框架提供了路由守卫功能，用来在进入某个路由前进行一些权限判断，如果判断无，就跳转到 404 或者登陆页面，比如 Vue 中的 beforeEach路由守卫钩子。react中就需要自己去实现这样的功能，react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件来实现不同的组件的跳转，从而实现拦截。
