掌握 React Router v6：核心组件与高级用法指南

引言

React Router v6 是 React 路由管理的最新版本，它带来了许多新特性和改进，使得路由管理更加灵活和强大。在这篇文章中，我们将总结 React Router v6 的核心组件和 Hooks，以及如何使用它们来构建一个高效的路由系统。

核心组件

BrowserRouter 和 HashRouter

• BrowserRouter：使用 HTML5 history API 来实现路由跳转，整个前端路由以 history 模式开始，包裹根组件。
• HashRouter：使用 URL 的 hash 部分来实现路由跳转，整个前端路由以 hash 模式开始，包裹根组件。

Routes 和 Route

• Routes：类似于 v5 版本的 Switch，主要是提供一个上下文环境，用于包裹多个 Route 组件。

• Route

  ：在 Route 组件中书写你对应的路由，以及路由所对应的组件。

  • path：匹配的路由。
  • element：匹配上该路由时，要渲染的组件。

Navigate 和 NavLink

• Navigate：导航组件，类似于 useNavigate 的返回值函数，只不过这是一个组件。
• NavLink：类似于 Link，最终和 Link 一样，会被渲染为 a 标签。它和 Link 的区别在于当前链接会有一个名为 active 的激活样式，所以一般用于做顶部或者左侧导航栏的跳转。

Hooks

useLocation

• useLocation：获取到 location 对象，获取到 location 对象后，我们可以获取 state 属性，这往往是其他路由跳转过来的时候，会在 state 里面传递额外的数据。

useNavigate

• useNavigate：调用之后会返回一个函数，通过该函数可以做跳转。

useParams

• useParams：获取动态参数。

高级用法

useRoutes

useRoutes 是 React Router v6 中的一个新特性，它允许你以更灵活的方式定义路由。使用示例如下：

import { useRoutes } from 'react-router-dom';
​
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 进行 children 属性的配置。children 对应的是一个数组，数组里面是一个一个路由对象。使用示例如下：

{
   path: "/about",
   element: <About />,
   children : [
       {
         path : "email",
         element : <Email/>
       },
       {
         path : "tel",
         element : <Tel/>
       },
       {
         path : "",
         element: <Navigate replace to="email" />
       }
   ]
},

之后，使用 Outlet 组件，该组件表示匹配上的子路由组件渲染的位置。

结语

React Router v6 带来了许多新特性和改进，使得路由管理更加灵活和强大。通过这篇文章，我们总结了 React Router v6 的核心组件和 Hooks，以及如何使用它们来构建一个高效的路由系统。希望这篇文章能帮助你更好地理解和使用 React Router v6。