Having trouble navigating to different page-CodePudding

I have a react website with user authentication and a sidebar. I have routes protected which don't allow the person to navigate without logging in. It works fine but now i want it so that the sidebar is shown only after login, to achieve this i kept sidebar inside protected routes and sign in sinup without it. Now when i try to navigate to sinup page from login nothing happens it says route"/" not found. or Throttling navigation to prevent the browser from hanging. See . Command line switch --disable-ipc-flooding-protection can be used to bypass the protection. react-dom.development.js:86

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

But after i login i am able to do so i don't understand what i am doing wrong.

Code :

<AuthContextProvider>
  <Router>
  <ProtectedRoute>
<Sidebar />
 </ProtectedRoute>
  <Routes>
  <Route path='/' element={<Signin />} />
  <Route path='/signup' element={ <Signup /> } />

      <Route
        path='/about-us'
        element={
          <ProtectedRoute>
            <Account />
          </ProtectedRoute>
        }
      />
  </Routes>

</Router>
</AuthContextProvider>
);
}

CodePudding user response：

If you only want the Sidebar component to render with certain routes it is a common solution to use what is called a Layout Route to render an Outlet component for nested routes to render their routed content into when matched.

See Layout Routes.

Example:

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

const SidebarLayout = () => (
  <>
    <Sidebar />
    <Outlet />
  </>
);

export default SidebarLayout;

...

import SidebarLayout from '../path/to/SidebarLayout';

...

<AuthContextProvider>
  <Router>
    <Routes>
      <Route path='/' element={<Signin />} />
      <Route path='/signup' element={ <Signup /> } />
      ... other routes without sidebar

      <Route element={<SidebarLayout />}>
        <Route
          path='/about-us'
          element={
            <ProtectedRoute>
              <Account />
            </ProtectedRoute>
          }
        />
        ... other routes with sidebar
      </Route>
    </Routes>
  </Router>
</AuthContextProvider>