Question 73730 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to fix the Routes rendering – Reactjs

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:
enter image description here

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
Tags:

3

Answers


  1. 0

    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 />
    </>
)
    Login or Signup to reply.
  2. 0

    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
    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search