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

Question

我试图隐藏侧边栏组件，使其在用户访问注册或登录页面时不显示。在 react-router-dom 版本 5 中，我们可以在 Switch 中使用 div 标签，但它已被 Route 元素替换，并且在使用 div 标签时抛出错误在 Route 元素内。

我完全是一个初学者，正在尝试创建一个简单的 mern 堆栈应用程序。

import Sidebar from './components/sidebar/Sidebar';
import './App.css';
import Home from './pages/home/Home';
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import UserList from './pages/userList/UserList';
import SignUp from "./components/sign-up.component";
import Login from "./components/login.component";
import Notfound from './components/Notfound/Notfound';

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


export default App;

Answer 1

如果您只想在 select 路由上渲染 Sidebar 组件，那么 RRDv6 中的模式是创建一个布局包装器来渲染 Sidebar 和 Outlet 嵌套 Route 个组件的组件。

Outlet

An <Outlet> should be used in parent route elements to render their child route elements. This allows nested UI to show up when child routes are rendered. If the parent route matched exactly, it will render a child index route or nothing if there is no index route.

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>
  );
}

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

How to hide a sidebar from a login page in react router

reactjs

mern

react-router-dom