一.前言
相信初学react或者vue的小伙伴们肯定会对路由感兴趣，自从出现spa(单页面应用)这个概念路由也随之诞生，路由的出现也为前端的发展有了更大的帮助，下面让我们去领略路由的魅力吧。
二.路由API
这里我们主要讲的路由6，学习路由5的小伙伴可以查询其他。路由有很多API这里我们为大家逐一介绍一下。
①依赖包
如果你使用的是npm的话：官方下载现在默认的是6版本
如果你使用的是yarn的话：同理
② BrowserRouter
BrowserRouter是最外层的APi，其是用来包裹组件的，其内部使用了history模式，所以会记录用户的使用记录，这样也可以直接跳转。
③ Link与NavLink
Link与NavLink，是路由跳转的事件源，你也可以理解成button，但是与button不同的是在这两个标签上你需要添加相对应的跳转路径，而NavLink与Link区别我理解就是可以样式不同。
④ Routes与Route
上面有了跳转的按钮了，那自然就有跳转的事件了。Route实现路由的定义，通常我们会使用Routes对Route进行包裹，Routes的作用就是使内部的Route进行智能匹配，防止重复配对，跟路由5的Switch功能呢类似。
Route上两个属性很重要，path：路径 这里要与Link填写的一致。elment 就是对应跳转的组件。
⑤ Navigate （重定向）
重定向：用于实现页面的跳转，替代了Redirect，例如下面首次进如页面，默认打开XXXX页面，这是需要使用Navigate，通过to指定要默认打开的页面：
当然Navigate也可以用来编程式路由导航，比如：点击某个按钮进行路由的跳转。
使用编程路由首先我们要使用的一个hook，useNavigate，有几个重要的参数，1.跳转的路径，2.跳转的传值，3.跳转时切换的方式。
⑥：路由表 useRoutes
当路由过多时，都是用Route，则会使页面代码过多，这是我们就可以使用路由表。使用路由必然要使用useRoutes这里可以将路由传入进去。
在路由表里，只有一级路由需要加 /，一级路由下的二级路由则不需要加 / 否则就会找不到组件，
在路由表里我们也可以重定向。当出现二级路由时，一定要在一级路由下的children的数组里填写二级路由。
⑦ Outlet
用于占位，指定路由位置，用于嵌套路由，展示的地方。简单一点就是outlet可以规定路由里面的内容在哪里出现。
三 路由传值以及如何接受值的问题
当我们使用路由时一般不单单的是跳转页面这么简单更多的是，通过跳转页面携带对应的参数。下面我们讲诉react跳转路由时，传参的方式。以及对应使用的hook。
1.通过pa'rms传递参数，首先使用parms传递参数时我们需要在路径进行占位操作。然后传递对应的值。
传值完成怎么获取值了？parms里react给我提供对应的hook，useParams，在这里我们可以解构到对应的值。
2.通过search传值，search传值方式与parms类似，都是需要占位，不过的时需要给对应的key。
获取search传值，react也为我们提供了hook useSearchParams
3.通过state传值，state与其他两者不同这里不需要占位。（query）
获取state传递的值使用useLocation
当我们使用编程导航时我们使用state传值方式
四 补充
1.useInRouterContext
从名字都不难看出，这个hook是判断处于路由环境。返回true就是存在，返回false就是不存在。
2.useBavigationType
判断当前页面通过那种方式跳转。replace/push/pop（刷新页面）
3.useResolvedPath
解析路径使用
五 结语
最后发布东西也只是想记录一下。有些都是自己的观点。大佬们如果发现错误。希望指教。