「这是我参与2022首次更文挑战的第4天，活动详情查看：2022首次更文挑战」。
在前几篇文章中，我主要讲解了React-RouterV5版本中的具体用法，但目前React-Router已经更新到V6版本了，所以咱们还得打起精神，甩开膀子继续学！好消息是V6版本并没有增加太多新东西，而是在V5的版本上做了一些api的调整与优化，那么接下来，请随着我来看看V6版本的新东西吧~
正文
具体来讲，V6主要做了如下变化：
<Switch>替换为<Routes><Route>新增属性 element<Route>属性 path 的调整<Route>新增属性 index- 新增组件
<Outlet> - 新增hook
useRoutes - useHistory 换成了 useNavigate
下面依次讲解
<Switch>替换为<Routes>
功能大致相同，但还是存在一些细小差别，具体如下：
Routes内的<Route>和<Link>的路径都是 相对的，也就是说 子级路由 不需要书写完整的路径，极大降低了心智负担- 路由是根据 最佳匹配 的原则进行匹配，而不是按顺序匹配的
- 路由可以作嵌套，而且嵌套的父级 route 的 path 不用加 *，但如果不是嵌套结构，而是分散在子组件中的，则必须要加上 *
<Route>新增属性element
在V5版本中，<Route> 存在 render 和 component 属性，现在统一为 element，可以更方便给组件传递自定义属性，而不需要通过render props
<Route>属性path的调整
path只支持两种动态参数
:id动态路由参数*通配符，只能在 path 的末尾使用，如index/*
<Route>新增属性index
表示是否是主路由，如果是的话，则不能有 下级路由，代表应该只渲染一个主路由的组件
新增组件 <Outlet>
类似插槽的作用，用于渲染 嵌套 在父级路由中的 子级路由
新增hook useRoutes
支持使用路由表的形式来配置路由，示例如下：
import { useRoutes } from 'react-router-dom'
function Example() {
const element = useRoutes(
[
{
path: '/', element: <Parent />,
children: [
{ path: 'Child1/', element: <Child1/> },
{ path: 'Child2/*', element: <Child2/> }
]
}
]
)
return element
}
useHistory 换成了 useNavigate
改变不止在名称上，使用上也发生了变化，具体如下：
- navigate('/home') => history.push('/home')
- navigate('/home',{ replace: true }) => history.replace('/home')
- navigate(1) => history.goForward()
- navigate(-1) => history.goBack()
结语
至此，所有关于React-Router的讲解就结束了，但我们的学习之路还没有结束，如果喜欢我的文章，请跟随我奔赴下一个目的地吧！
