CODEWITHSUNDEEP
reactjsreact-router-v4react-router-dom
MasterKN
MasterKN

Reputation: 11

How to create multiple nested routes for Front and admin pages

I am facing issue in routing for front section of website and admin section, My code look like this: App.js

 class App extends Component {
  render() {
    return (
      <>
        <BrowserRouter>
          <Router />
        </BrowserRouter>
      </>
    );
  }
}

Router.js

const Router = () => (
  <>
    <Switch>
      <Home>
        <Route
          component={({ match }) => (
            <div>
              <Route exact path="/" component={Main} />
              <Route exact path="/read" component={Read} />
              <Route exact path="/post" component={Posts} />
              <Route exact path="/user" component={Users} />
              <Route exact path="/signup" component={Signup} />
              <Route exact path="/login" component={Login} />
              <Route exact path="/post/:id" component={Post} />
              <Route exact path="/forgot-password" component={ForgotPassword} />
            </div>
          )}
        />
      </Home>
      {/*Admin dashboard*/}
      <Dashboard>
        <Route
          component={({ match }) => (
            <div>
              <Route exact path="/admin" component={MainDashboard} />
              <Route exact path="/admin/post" component={PostManage} />
              <Route exact path="/admin/user" component={UserManage} />
            </div>
          )}
        />
      </Dashboard>
      <Route component={NoMatchPage} />
    </Switch>
  </>
);


export default Router;

Dashboard.js

const Dashboard = props => {
  return (
    <div>
      <Sidebar />
      {props.children}
    </div>
  );
};
export default Dashboard;

I want implement such that Home and Dashboard have different routing. But When i use this code, it only able to route Home nested routes i.e. /read,/post are working fine. But /admin,/admin/post are not showing up.

Upvotes: 0

Views: 606

Answers (1)

Saqib Naseeb
Saqib Naseeb

Reputation: 741

You have made all the routes "exact" which is making trouble for you. You should make the parent to be just "path".

For example:

Remove the "exact" from

<Route path="/admin" component={MainDashboard} />

and your nested routes of admin will start working.

Upvotes: 1

Related Questions