react-router-dom v6,嵌套路由

在 React Router v6 中，请使用 `<Routes>` 和 `<Route>` 组件来创建嵌套路由。以下是一个示例：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users" element={<Users />}>
          <Route path="/" element={<UserList />} />
          <Route path=":id" element={<UserDetails />} />
        </Route>
      </Routes>
    </Router>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function Users() {
  return (
    <div>
      <h1>Users</h1>
      <Outlet />
    </div>
  );
}

function UserList() {
  return <h2>User List</h2>;
}

function UserDetails() {
  return <h2>User Details</h2>;
}

在上面的示例中，`<Routes>` 组件是路由的根，`<Route>` 组件用于定义路由的路径和对应的组件。嵌套路由可以在父级 `<Route>` 组件内部使用更多的 `<Route>` 组件来定义。

在 `/users` 路径下，`<Users>` 组件使用了 `<Outlet>` 组件，它用于渲染嵌套的子路由。`<UserList>` 和 `<UserDetails>` 组件分别是 `/users` 和 `/users/:id` 路径的子组件。

这样，当访问 `/users` 路径时，会渲染 `<Users>` 组件，并在其内部渲染 `<UserList>` 组件。当访问 `/users/123` 路径时，会仍然渲染 `<Users>` 组件，并在其内部渲染 `<UserDetails>` 组件。

希望这个示例对你有所帮助！