How to configure the Routes in Sidebar navigation after Login page in React?

user_16388345 0
Viewed 1560

I am designing a users dashboard in React, wherein User logs in and navigate to his dashboard with other links such as Archived, Profile and Settings. My Login and then Navigating to HomePage is working fine. I have designed the Dashboard, Archived, Profile and Settings Page Links in Sidebar. Now when I am navigating to the Links. It takes me to a new URL path and my Sidebar disappears. I want my sidebar to still appear on all pages as long as I am logged in.

Below is my App.js where I have designed the upper level route:

return (
    <div>
      <Router history={history}>
        <Switch>
          <PrivateRoute exact path="/" component={HomePage} />
          <Route path="/login" component={LoginPage} />
          <Route path="/register" component={RegisterPage} />
          <Redirect from="*" to="/" />
        </Switch>
      </Router>
    </div>
  );

Once User is on HomePage, I need the dashboard and other links to show. and when User clicks on any Sidebar link, Sidebar should still be there while the other page opens. So I added the inner Routes to the HomePage.jsx like this:

return (
    <div>
      <Router history={history}>
        <Sidebar />
        <Switch>
          <Route path="/" component={Dashboard} />
          <Route path="/archived" component={ArchivedPage} />
          <Route path="/profile" component={ProfilePage} />
          <Route path="/settings" component={SettingsPage} />
          {/* <Redirect from="*" to="/" /> */}
        </Switch>
      </Router>
    </div>
);

But it doesn't work. Can anyone please help me understanding if this is correct. or how can I achieve the required result. Please let me know if you need any other details.

Thank you.

react-router-dom react-router react-hooks reactjs javascript
2 Answers

Issue

The issue is that you are exactly matching "/" to render HomePage, but then as soon as the path is any deeper, like "/archived", it no longer exactly matches and HomePage is unmounted.

You should not render a Router within another Router, you need only one router per app to provide the routing context.

Solution

Remove the inner router (and any other nested routers!!). Remove the exact prop on the "/" path and reorder the routes to specify the more specific paths before less specific paths so the Switch can actually do its job and match and render the appropriate route.

App

Reorder the more specific "/login" and "/register" paths to be matched prior to the less specific "/" path. If you had, for example, a "/login/google" path, this is more specific than "/login" and would be ordered earlier.

return (
  <div>
    <Router history={history}>
      <Switch>
        <Route path="/login" component={LoginPage} />
        <Route path="/register" component={RegisterPage} />
        <PrivateRoute path="/" component={HomePage} />
        <Redirect to="/" />
      </Switch>
    </Router>
  </div>
);

HomePage

Move the Dashboard to the last route position so if no other route above it is matched and returned then the dashboard is matched and rendered.

return (
  <div>
    <Sidebar />
    <Switch>
      <Route path="/archived" component={ArchivedPage} />
      <Route path="/profile" component={ProfilePage} />
      <Route path="/settings" component={SettingsPage} />
      <Route component={Dashboard} />
    </Switch>
  </div>
);
user_86908570

in first place your doing something wrong you cant put a Router inside a Router, you haver a Router in app then inside a component that is inside of app you have another Router thats a problem i dont know if that solves your problem but try it just delete Router in homepage

user_159181680
Related