useRoutes

1. 使用路由表

import { Navigate } from "react-router-dom";

// 路由组件
import Home from "../pages/Home";
import About from "../pages/About";

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

export default routes;

2. 引入

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

export default function App() {
  const router = useRoutes(routes);

  return (
    <div>
      <h2>React Router Demo</h2>
      <div>
        <div>
          <NavLink
            className={({ isActive }) => (isActive ? "cls1" : "cls2")}
            to="/home"
          >
            Home
          </NavLink>
          <NavLink to="/about">About</NavLink>
        </div>
        {/* 路由表 */}
        <div>{router}</div>
      </div>
    </div>
  );
}