CODEWITHSUNDEEP
reactjsreact-routerreact-router-domreact-router-v4
Joseph
Joseph

Reputation: 7755

Nested Routing in ReactJS

I have a very simple problem in my routing in ReactJS. I have a problem on my PrivateRoute. I cannot redirect to Customer or Product routes. Pls check my code below. Thanks.

Routes.js

function Routes() {
  return (
    <Router>
      <Switch>
        <PrivateRoute exact path="/" component={Common} />
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
      </Switch>
    </Router>
  );
}

export default Routes;

Common.js

const Common = () => {
    const classes = useStyles();
    return (
      <div>
        <div className={classes.root}>
          <CssBaseline />
          <SideNav />
          <main className={classes.content}>
            <div className={classes.toolbar} />
            <Switch>
              <PrivateRoute path="/" component={Dashboard} />
              <PrivateRoute path="/dashboard" component={Dashboard} />
              <PrivateRoute path="/customers" component={Customers} />
              <PrivateRoute path="/customers/:id" component={CustomersDetail} />
              <PrivateRoute path="/products" component={Products} />
              <PrivateRoute path="/products/:id" component={ProductsDetail} />
            </Switch>
          </main>
        </div>
      </div>
    );
  };

  export default Common;

Upvotes: 0

Views: 155

Answers (2)

Drew Reese
Drew Reese

Reputation: 202605

When rendering nested routes you'll need to prepend the url path up to the nested routes.

Route Nesting

EDIT: meant to use match.path instead of match.url. path is the path pattern used to match and useful for building nested routes.

const Common = ({ match: { path } }) => { // extract the path from match route prop
  const classes = useStyles();
  return (
    <div>
      <div className={classes.root}>
        <CssBaseline />
        <SideNav />
        <main className={classes.content}>
          <div className={classes.toolbar} />
          <Switch>
            <PrivateRoute path={`${path}/customers/:id`} component={CustomersDetail} />
            <PrivateRoute path={`${path}/customers`} component={Customers} />
            <PrivateRoute path={`${path}/products/:id`} component={ProductsDetail} />
            <PrivateRoute path={`${path}/products`} component={Products} />
            <PrivateRoute path={[`${path}/`, `${path}/dashboard`]} component={Dashboard} />
          </Switch>
        </main>
      </div>
    </div>
  );
};

NOTE: Reordered the routes a bit to match more specific paths first since Switch returns only the first match.

You'll need to also remove the exact prop from your root router so it can continue to match other sub-routes within Common.

function Routes() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
        <PrivateRoute path="/" component={Common} />
      </Switch>
    </Router>
  );
}

Upvotes: 1

Pavan
Pavan

Reputation: 1015

Remove the exact prop from 

<PrivateRoute path="/" component={Common} />

Exact would only match '/'. You'd want it to match all routes starting with /. Also place the private route at the last after login and signup

Upvotes: 0

Related Questions