Nested Routing in ReactJS

Question

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;

why u'r using switch in common . you'r already used in route.js . — Arpit Vyas
– Arpit Vyas, Commented May 28, 2020 at 6:29
Please be more specific with what you are trying to achieve and what is the problem. — Rohit Rawat
– Rohit Rawat, Commented May 28, 2020 at 6:34

Drew Reese · Accepted Answer · 2020-05-28 07:55:51Z

1

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>
  );
}

edited May 28, 2020 at 7:55

answered May 28, 2020 at 6:29

Drew Reese

207k19 gold badges280 silver badges293 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Joseph Over a year ago

There's a problem when i redirect to the products page, when i'm on the customer detail, it attached a relative route on it

Joseph Over a year ago

I want the default route to appear like /dashboard, and when i i navigate to customers it should look like /customer

Drew Reese Over a year ago

@Robert It can still access the match route prop and build a correct URL.

Joseph Over a year ago

Why is there two urls in <PrivateRoute path={[${url}/, ${url}/dashboard]} component={Dashboard} />

Drew Reese Over a year ago

@Robert They both render the same component, Dashboard. path can take a string or string[]. reacttraining.com/react-router/web/api/Route/path-string-string

|

Pavan · Accepted Answer · 2020-05-28 06:30:24Z

0

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

answered May 28, 2020 at 6:30

Pavan

1,0252 gold badges16 silver badges28 bronze badges

Collectives™ on Stack Overflow

Nested Routing in ReactJS

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related