react-router-dom V6 的嵌套路由 使用 Route 嵌套实现

React-Router-Dom V6 中嵌套路由使用 Route 嵌套实现的示例如下：

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

const App = () => (
  <Routes>
    <Route exact path="/" element={<Home />} />
    <Route path="/about" element={<About />}>
      <Route path="/contact" element={<Contact />} />
      <Route path="/team" element={<Team />} />
    </Route>
    <Route path="/services" element={<Services />} />
  </Routes>
);

在上述示例中，嵌套路由的实现通过 Route 组件的嵌套来实现。例如，/about 路径下的 Contact 和 Team 组件只有在访问 /about/contact 和 /about/team 路径时才会显示。这样做可以使路由的组织更加清晰，更易于维护。

相关问题

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>` 组件。

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

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组件来定义子路由。