How to fix the Routes rendering

Question

As my routes the Sidebar and the topbar is rendering with Signup and login page.

I want to render the Signup and login page with a seperate route where the sidebar should not render. And the sidebar and the Topbar should render only with the home and other component.

I've used react-router-dom for routes and material ui components for the theme. This is the code:

import { Route, Routes } from "react-router-dom";
import { useState } from "react";
import Home from "./pages/Home";
import Page1 from "./pages/page1";
import LogIn from './pages/LogIn'
import SignUp  from './pages/SignUp'
import Sidebar from "./scenes/global/Sidebar"
import Topbar from "./scenes/global/Topbar"
import { CssBaseline, ThemeProvider } from "@mui/material";
import { ColorModeContext, useMode } from "./theme";
function App() {
  const [theme, colorMode] = useMode();
  const [isSidebar, setIsSidebar] = useState(true);

  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
      <div className="app">
        <Routes>
          <Route path="/" element={<SignUp/>}/>
          <Route path="/login" element={<LogIn/>}/>
        </Routes>
        <Sidebar isSidebar={isSidebar}/>
        <main className="content">
          <Topbar setIsSidebar={setIsSidebar}/>
            <Routes>
            <Route path="/home" element={<Home/>}/>
            <Route path="/page1" element={<Page1/>}/>
            </Routes> 
        </main>
      </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
    
  )
}

export default App

Answer 1

you can render the sidebar and the topbar inside each page component. This will not only solve your problem but will also make it easier for you to manage the project pages.

for example inside Home.jsx

return (
    <>
        <TopBar />
        <PageContent />
        <SideBar />
    </>
)

Answer 2

Using react router v6 you can use Outlet

Change your App.js like this :

function App() {
  return (
    <ColorModeContext.Provider value={colorMode}>
      <ThemeProvider theme={theme}>
        <CssBaseline />
        <div className="app">
          <Routes>
            <Route element={<Sidebar  />}>
              <main className="content">
                <Route element={<Topbar  />}>
                  <Route path="/home" element={<Home />} />
                  <Route path="/page1" element={<Page1 />} />
                </Route>
              </main>
            </Route>
            <Route path="/login" element={<LogIn />} />
            <Route path="/signup" element={<SignUp />} />
          </Routes>
        </div>
      </ThemeProvider>
    </ColorModeContext.Provider>
  );
}

and in TopBar.js :

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

    function Topbar() {
       //your code ......
      return (
        <div>
          {Your code goes here } 
          <Outlet/>
        </div>
      )
    }
     
    export default Topbar

and in the Sidebar.js :

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

function Sidebar() {
   // Your code ......
  return (
    <div>
      {Your code goes here}
      <Outlet/>
    </div>
  )
}

export default Sidebar

Answer 3

You can use layouts:

1. App.jsx

   <Routes>
        <Route path="/auth" element={<AuthLayout />}>
        //GuestLayout child routes
        </Route>
   
        <Route path="/home" element={<MainLayout />}>
        //MainLayout child routes 
        </Route>
   </Routes>
   

2. MainLayout.jsx

   <div>
      <Sidebar />
      <TopBar />
      //Render the child routes            
      <Outlet />
   </div>