反应路由器出口不渲染布局

Question

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

应用程序.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>
  );
}

布局.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>
  );
}

仪表板.js

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

Answer 1

布局路由实际上需要有一个嵌套路由才能将其element渲染到Outlet中，而不是作为兄弟路由。

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

此外，如果您不想在"/admin"上呈现任何内容，请从Layout中删除重定向，从布局路由中删除path道具，并更新仪表板的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>
  );
}