Javascript 嵌套路由在使用 ReactRouterDom 的 React JS 中不起作用

在您当前的实现中，Home组件呈现102个路由，而不是嵌套的路由.为了使后代路由可用来匹配并呈现其路由的内容，父路由必须在其路径上附加尾随的通配符"*"匹配器.

示例:

<Route path="home/*" element={<Home />} />

另请注意，子代路由是相对于其父路由构建的，因此这Home个路由将解析为以下内容:

<Route
  path="/balance"           // <-- "/home/balance"
  element={<Balance />}
/>
<Route
  path="/"                  // <-- "/home"
  element={<Dashboard />}
/>
<Route
  path="/assets"            // <-- "/home/assets"
  element={<Assets />}
/>
<Route
  path="/open-account"      // <-- "/home/open-account"
  element={<OpenAccount />}
/>

您也可以通过将Home分量转换为layout route分量来使用104路由来实现相同的目的.布局路由为其嵌套路由呈现Outlet组件，以将其element内容呈现到其中，而不是直接呈现派生路由.

示例:

import React from "react";
import { Outlet } from "react-router-dom";
import { Footer } from "../../components/Footer/Footer";
import Navbar from "../../components/navbar/Navbar";
import Sidebar from "../../components/sidebar/Sidebar";
import "./Home.scss";

const Home = () => {
  return (
    <div className="home">
      <Sidebar />
      <div className="homeContainer">
        <Navbar />
        <div>
          <Outlet /> // <-- nested routes render content here
        </div>
        <Footer />
      </div>
    </div>
  );
};

export default Home;

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route, Outlet } from "react-router-dom";
import Login from "./pages/login/Login";
import Registration from "./pages/registration/Registration";
import Assets from "../../components/assets/Assets";
import Balance from "../../components/balance/Balance";
import Dashboard from "../../components/dashboard/Dashboard";
import OpenAccount from "../../components/openAccount/OpenAccount";
import Home from "./pages/Home/Home";

const LoginLayout = () => (
  <div className="login_page">
    <Outlet />
  </div>
);

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route element={<LoginLayout />}>
            <Route path="/" element={<Login />} />
            <Route path="registration" element={<Registration />} />
          </Route>
          <Route path="home" element={<Home />}>
            <Route path="balance" element={<Balance />} />
            <Route index element={<Dashboard />} />
            <Route path="assets" element={<Assets />} />
            <Route path="open-account" element={<OpenAccount />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

export default App;