如何在反应路由器的登录页面中隐藏侧边栏

Dre*_*ese 5

如果您只想Sidebar在选择路由上呈现组件，那么 RRDv6 中的模式是您创建一个布局包装器，用于呈现嵌套组件的Sidebar组件。OutletRoute

出口

<Outlet>应该在父路由元素中使用An来呈现其子路由元素。这允许在渲染子路由时显示嵌套 UI。如果父路由完全匹配，它将渲染子索引路由，如果没有索引路由，则不渲染。

import { Outlet } from 'react-router-dom';

const SidebarLayout = () => (
  <>
    <Sidebar />
    <Outlet />
  </>
);

渲染您希望拥有Sidebar嵌套子路由的路由。

function App() {
  return (
    <Router>
      <div className="container">
        <Routes>
          <Route element={<SidebarLayout/>}>
            <Route index element={<Home/>} />
            <Route path="/users" element={<UserList/>} />
            <Route path="*" element={<Notfound/>} />
          </Route>
          <Route path="/login" element={<Login/>} />
          <Route path="/signup" element={<SignUp/>} />
        </Routes>
      </div>
    </Router>
  );
}