Javascript 我想使用Reaction路由将我的Web应用程序分成两个部分.我正在使用前面提到的一条路由内的路由

如果在"/signin"上呈现的Signin组件呈现106个路由，例如，Signin呈现另一个Routes和Route个组件的集合，则父路由应指定尾随通配符"*"匹配器或SPLAT，以便可以匹配和呈现所有后代路由.

给出您的代码/路由 struct

/src
|-- /components
|   |-- /signin
|       |-- SignIn.js
|       |-- /home
|           |-- Home.js
|
|           |-- /dashboard
|               |-- Dashboard.js
|    |-- /assignee
|-- /App.js
|-- /index.js

希望我已经正确理解了您的路由组织.

示例:

function App() {
  return (
    <Router>
      <div className="maindiv">
        <Routes>
          <Route path="/*" element={<SignIn />} />
          <Route path="/assignment" element={<AssigneePage />} />
        </Routes>
      </div>
    </Router>
  );
}

由于Home也会呈现派生路由，因此Signin中的父路由也需要附加路由匹配器.

const SignIn = () => {
  ...

  return (
    ...
    <Routes>
      <Route
        path="/home/*"     // <-- "/signin/home"
        element={<Home />}
      />
    </Routes>
    ...
  );
}

function Home() {
  return (
    <div>
      <Container className="content">
        <div className="side-nav">
          <Nav />
        </div>
        <div className="main-content">
          <Routes>
            <Route
              path="/dashboard"       // <-- "/signin/home/dashboard"
              element={<Dashboard />}
            />
            <Route
              path="/review"          // <-- "/signin/home/review"
              element={<Review />}
            />
          </Routes>
        </div>
      </Container>
    </div>
  );
}

有关详细信息，请参阅route splats.