创建没有侧边栏的着陆页

Question

我想在主页组件上制作一个没有边栏的单独登录页面，并且无论用户是登录还是注销都没有关系。

import { BrowserRouter, Route, Routes } from "react-router-dom";
import { useAuthContext } from "./hooks/useAuthContext";

//styles
import "./App.css";

//pages and components
import Navbar from "./components/Navbar";
import Sidebar from "./components/Sidebar";
import Budget from "./pages/Budget/Budget";
import Login from "./pages/Login/Login";
import Signup from "./pages/Signup/Signup";
import Transactions from "./pages/Transactions/Transactions";
import Home from "./pages/Home/Home";

function App() {
  const { authIsReady, user } = useAuthContext();

  return (
    <div className='App'>
      {authIsReady && (
        <BrowserRouter>
          {user && <Sidebar />}
          <div className='container'>
            {!user && <Navbar />}
            <Routes>
              <Route path='/budget' element={user ? <Budget /> : <Login />} />
              <Route
                path='/transactions'
                element={user ? <Transactions /> : <Login />}
              />
              <Route path='/login' element={!user ? <Login /> : <Budget />} />
              <Route path='/signup' element={!user ? <Signup /> : <Budget />} />
              <Route path='/' element={user ? <Home /> : <Login />} />
            </Routes>
          </div>
        </BrowserRouter>
      )}
    </div>
  );
}

export default App;

我可以采取哪些步骤来实现这一目标？还是我必须满足于一个，侧边栏或导航栏始终处于打开状态。

Answer 1

您可以为各种用例创建布局和包装器组件。

从 Home 的简单包装开始，呈现时没有侧边栏。

<Route
  path='/'
  element={
    user
      ? (
        <div className='container'>
          {!user && <Navbar />}
          <Home />
        </div>
      ) 
      : <Login />
  }
/>

接下来创建一个布局组件，它将 user 值作为 prop 并将其嵌套的 Route 组件呈现为 Outlet.

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

const Layout = ({ user }) => (
  <>
    {user && <Sidebar />}
    <div className='container'>
      {!user && <Navbar />}
      <Outlet />
    </div>
  </>
);

...

function App() {
  const { authIsReady, user } = useAuthContext();

  return (
    <div className='App'>
      {authIsReady && (
        <BrowserRouter>
          <Routes>
            <Route element={<Layout user={user} />}>
              <Route path='/budget' element={user ? <Budget /> : <Login />} />
              <Route
                path='/transactions'
                element={user ? <Transactions /> : <Login />}
              />
              <Route path='/login' element={!user ? <Login /> : <Budget />} />
              <Route path='/signup' element={!user ? <Signup /> : <Budget />} />
            </Route>
            <Route
              path='/'
              element={
                user
                  ? (
                    <div className='container'>
                      {!user && <Navbar />}
                      <Home />
                    </div>
                  ) 
                  : <Login />
              }
            />
          </Routes>
        </BrowserRouter>
      )}
    </div>
  );
}

FWIW 您可能还想调查身份验证和匿名包装器以处理重定向到呈现 Login 组件的“/login”路由。如果有的话，它会让你的代码更干净一点。

创建没有侧边栏的着陆页

Create landing page without sidebar

reactjs

react-router-dom