react-router-dom v6嵌套路由

React Router v6中的嵌套路由是通过将子路由声明为父级路由的子元素来实现的。以下是一个基本的示例，其中包含一个App组件作为父级路由，以及两个子级路由：Home和About。

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

function App() {
  return (
    <BrowserRouter>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

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

function About() {
  return (
    <>
      <h1>About</h1>
      <Routes>
        <Route path="/" element={<AboutIndex />} />
        <Route path="/team" element={<AboutTeam />} />
        <Route path="/history" element={<AboutHistory />} />
      </Routes>
    </>
  );
}

function AboutIndex() {
  return <p>Welcome to the About page!</p>;
}

function AboutTeam() {
  return <p>Learn more about our amazing team.</p>;
}

function AboutHistory() {
  return <p>Discover our company's fascinating history.</p>;
}

在这个示例中，About组件包含了一个嵌套的路由，其中包含三个子路由：AboutIndex、AboutTeam和AboutHistory。这些子路由将在About组件中渲染。

注意，Routes和Route组件也可以嵌套，因此在About组件中声明的嵌套路由也有自己的Routes组件来定义子路由。