使用 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;