【React系列】来看看 React-RouterV6 做了哪些改变？

在前几篇文章中，我主要讲解了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的讲解就结束了，但我们的学习之路还没有结束，如果喜欢我的文章，请跟随我奔赴下一个目的地吧！