使用 react-router-dom v6.22 的 useRoutes 路由表

使用 react-router-dom v6.22 的 useRoutes 路由表

React Router 是 React 应用程序中用于导航的重要库之一。在 v6.22 版本中，它引入了 useRoutes 钩子，使得路由配置更加灵活。本文将介绍如何在 React 应用程序中使用 useRoutes 钩子来管理路由。

安装 React Router

首先，确保已经安装了 React Router v6.22。如果没有安装，可以使用以下命令安装：

npm install react-router-dom@6.22.0
# 或者
yarn add react-router-dom@6.22.0

创建路由配置

在使用 useRoutes 之前，需要定义路由配置。通常，我们将路由配置放在单独的文件中，然后通过 useRoutes 来使用它。例如，我们可以创建一个 routes 文件来定义路由：

// routes/index.js
import { Navigate } from "react-router-dom";
import About from "../About";
import Home from "../Home";

const routes = [
  {
    path: '/about',
    element: <About />,
  },
  {
    path: '/home',
    element: <Home />,
  },
  {
    path: '/',
    element: <Navigate to="/about" />,
  },
];

export default routes;

使用 useRoutes

接下来，在组件中使用 useRoutes 钩子来渲染路由配置：

// Demo1.jsx
import React from 'react';
import { NavLink, useRoutes } from 'react-router-dom';
import routes from './routes';

function Demo1() {
  const routeElement = useRoutes(routes);

  return (
    <div>
      <div className="row">
        <ul className="nav nav-pills">
          <li className="nav-item">
            <NavLink className="nav-link" to="/about">About</NavLink>
          </li>
          <li className="nav-item">
            <NavLink className="nav-link" to="/home">Home</NavLink>
          </li>
        </ul>
      </div>
      <div className="panel">
        {routeElement}
      </div>
    </div>
  );
}

export default Demo1;

总结

通过以上步骤，我们可以在 React 应用程序中使用 useRoutes 钩子来管理路由配置。这种方式使得路由的定义和渲染更加简单和灵活，有助于更好地组织和维护项目中的路由结构。

参考

• 使用 react-router-dom v6.22 的 useRoutes 路由表
• 完整代码