526互联

React-router v6 路由总结

发布时间 2023-03-23 11:28:16作者: HuangBingQuan

React-router v6 路由总结

组件

  • BrowserRouter：整个前端路由以 history 模式开始，包裹根组件
  • HashRouter：整个前端路由以 hash 模式开始，包裹根组件
  • Routes：类似于 v5 版本的 Switch，主要是提供一个上下文环境
  • Route：在 Route 组件中书写你对应的路由，以及路由所对应的组件
    • path：匹配的路由
    • element：匹配上该路由时，要渲染的组件
  • Navigate：导航组件，类似于 useNavigate 的返回值函数，只不过这是一个组件
  • NavLink：类似于 Link，最终和 Link 一样，会被渲染为 a 标签，注意它和 Link 的区别，实际上就是当前链接，会有一个名为 active 的激活样式，所以一般用于做顶部或者左侧导航栏的跳转

Hooks

  • useLocation：获取到 location 对象，获取到 location 对象后，我们可以获取 state 属性，这往往是其他路由跳转过来的时候，会在 state 里面传递额外的数据。
  • useNavigate：调用之后会返回一个函数，通过该函数可以做跳转。
  • useParams：获取动态参数。

useRoutes

  • 使用示例如下：
function Router(props) {
    return useRoutes([
        {
            path: "/home",
            element: <Home />,
        },
        {
            path: "/about",
            element: <About />,
        },
        {
            path: "/add",
            element: <AddOrEdit />,
        },
        {
            path: "/detail/:id",
            element: <Detail />,
        },
        {
            path: "/edit/:id",
            element: <AddOrEdit />,
        },
        {
            path: "/",
            element: <Navigate replace to="/home" />
        }
    ]);
}

export default Router;

嵌套路由

  • 直接在 useRoutes 进行 chilren 属性的配置即可，类似于 vue-router，children 对应的是一个数组，数组里面是一个一个路由对象
{
   path: "/about",
     element: <About />,
     children : [
         {
           path : "email",
           element : <Email/>
         },
         {
           path : "tel",
           element : <Tel/>
         },
         {
           path : "",
           element: <Navigate replace to="email" />
         }
       ]
 }
  • 之后，使用 Outlet 组件，该组件表示匹配上的子路由组件渲染的位置。