Javascript react 路由出口不渲染布局

发布于09月26日

try 使用<Outlet />呈现布局内的仪表板组件，但在访问/admin/dashboard路径时，布局未呈现.如何解决这个问题？谢谢你们的帮助

App.js

export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route exact path="/admin" element={<Layout />} />
          <Route exact path="/admin/dashboard" element={<Dashboard />} />
        </Routes>
      </Router>
    </div>
  );
}

Layout.js

export default function Layout() {
  return (
    <Fragment>
      <div className="sb-nav-fixed">
        <Navbar />

        <div id="layoutSidenav">
          <div id="layoutSidenav_nav">
            <Sidebar />
          </div>

          <div id="layoutSidenav_content">
            <main>

              <Outlet />
              <Navigate from="admin" to="/admin/dashboard" />

            </main>
            <Footer />
          </div>
        </div>
      </div>
    </Fragment>
  );
}

Dashboard.js

export default function Dashboard() {
  return <h1>Dashboard</h1>;
}

推荐答案

布局路由需要actually具有嵌套路由，以使其能够将其element呈现到Outlet中，而不是作为sibling 路由.

export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/admin" element={<Layout />}>
            <Route path="dashboard" element={<Dashboard />} />
          </Route>
        </Routes>
      </Router>
    </div>
  );
}

此外，如果你的don't想要在"/admin"上渲染任何东西，那么从Layout中删除重定向，从布局路由中删除pathprops ，并更新仪表板的path.

示例:

export default function Layout() {
  return (
    <Fragment>
      <div className="sb-nav-fixed">
        <Navbar />

        <div id="layoutSidenav">
          <div id="layoutSidenav_nav">
            <Sidebar />
          </div>

          <div id="layoutSidenav_content">
            <main>
              <Outlet /> // <-- no redirect now
            </main>
            <Footer />
          </div>
        </div>
      </div>
    </Fragment>
  );
}

...

export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route element={<Layout />}>
            <Route path="/admin/dashboard" element={<Dashboard />} />
          </Route>
          <Route path="*" element={<Navigate to="/admin/dashboard" replace />} />
        </Routes>
      </Router>
    </div>
  );
}

如果计划将其他路径呈现到布局路径中，则保持路径不变，并将重定向移动到索引路径.

export default function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route path="/admin" element={<Layout />}>
            <Route index element={<Navigate to="dashboard" replace />} />
            <Route path="dashboard" element={<Dashboard />} />
            ... other admin routes ...
          </Route>
        </Routes>
      </Router>
    </div>
  );
}