Create landing page without sidebar

Question

I would like to make a seperate landing page without the Sidebar on the Home component and doesn't matter if the user is logged in or logged out.

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;

What are the steps I can go about to make this happen? Or do I have to settle for one, either the Sidebar or Navbar up at all times.

Answer 1

You can create layout and wrapper components for various use cases.

Starting with a simple wrapper for Home that renders without a side bar.

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

Next create a layout component that takes the user value as a prop and renders its nested Route components into an 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 you may also want to investigate auth and anonymous wrappers to handle a redirect to a "/login" route that is rendering the Login component. If anything it would make your code a little more clean.