React Router：登录页面中显示的侧边栏

Question

我想在我的登录页面上隐藏我的侧边栏，只有记录的用户才能看到它，这是我的代码，但我不知道如何隐藏它。

 <BrowserRouter>
        <div className="container">
          <Sidebar />
          <div className="main_content">
            <Routes>
              <Route path="/" element={<Login />} />
              <Route path="/dashboard" element={<Dashboard />} />
              <Route path="/list" element={<Contrats />} />
              <Route path="/new_contract" element={<AddContract />} />
              <Route path="/edit_contract/:id" element={<EditContract />} />
              <Route path="/contract/:id" element={<Contract />} />
              <Route path="/settings" element={<div>Settings</div>} />
              <Route path="/profile" element={<div>Profile</div>} />
              <Route path="/forbidden" element={<Forbidden />} />
              <Route path="/error" element={<ServerError />} />
              <Route path="*" element={<NotFound />} />
            </Routes>
          </div>
        </div>
      </BrowserRouter>

有人知道如何为无授权的用户隐藏它吗？ 谢谢

Answer 1

快速而肮脏的方法是使用简单的三元组，如下所示：

{user.isAuth ? 
 (<Sidebar />) : 
 <></>
}

但我猜一个更清洁的解决方案可能是对经过身份验证的路由使用布局，对其他路由使用另一个布局。

查看这篇文章以获取类似的内容

Answer 2

let pathName = window.location.pathname
let arr = pathName.toString().split("/");
let currentPath = arr[arr.length-1];
 <BrowserRouter>
        <div className="container">

          currentPath.length>0&&<Sidebar />
          <div className="main_content">
            <Routes>
              <Route path="/" element={<Login />} />
              <Route path="/dashboard" element={<Dashboard />} />
              <Route path="/list" element={<Contrats />} />
              <Route path="/new_contract" element={<AddContract />} />
              <Route path="/edit_contract/:id" element={<EditContract />} />
              <Route path="/contract/:id" element={<Contract />} />
              <Route path="/settings" element={<div>Settings</div>} />
              <Route path="/profile" element={<div>Profile</div>} />
              <Route path="/forbidden" element={<Forbidden />} />
              <Route path="/error" element={<ServerError />} />
              <Route path="*" element={<NotFound />} />
            </Routes>
          </div>
        </div>
      </BrowserRouter>

Answer 3

我想出如何做到这一点的方法是在我的私有路由组件中呈现它，该组件使用我的 Auth Context 来评估用户是否已登录，例如：

import React, { useContext } from 'react';
import { Navigate } from 'react-router-dom';
import { AuthContext } from '../Contexts/AuthContext';
import SideMenu from './SideMenu';

const PrivateRoute = (props) => {
const { auth } = useContext(AuthContext);
return auth.isLogged ? (
  <>
    <SideMenu />
    {props.children}
  </>
  ) : (
    <Navigate to="/" />
  );
};

export default PrivateRoute;