Nested React Router

Question

I need some help to accomplish routing in ReactJS. I describe my problem and hope you can help me..

I have famous index.js in this file and I call app.js from it

**index.js** 

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);

inside app.js I wrote some code for routing as below :

**App.js**

return (
        <div>
            {message &&
                <div className={`alert ${type}`}>{message}</div>
            }
            <Router history={history}>
                <div>
                    <PrivateRoute exact path="/" component={Main} />
                    <Route path="/login" component={SignIn} />
                </div>
            </Router>
        </div>
    );

this work correctly and after login I redirect to Main.js

and now my problem :

I`ve written some route in Main.js page that all other pages must inherit from that. I mean all other page must have the skeleton of Main.js

here is some code of Main.js

**Main.js**

<main className={classes.content}>
    <Link to="/HomePage"> HomePage</Link>
    <Link to="/Admin"> Admin </Link>
    <Link to="/Menus"> Menu </Link>
    <Link to="/Product"> Product </Link>
    <div className={classes.appBarSpacer} />
    <Switch>
        <PrivateRoute path="/HomePage" component={HomePage} />
        <PrivateRoute path="/Admin" component={Admin} />
        <PrivateRoute path="/Menus" component={Menus} />
        <PrivateRoute path="/Product" component={Product} />
    </Switch>
</main>

unfortunately none of this routes works.. I`m extremely confused because all of things seems right

what version of react-router you are using?

Vishal Rajole
– Vishal Rajole

2021-02-21 20:19:09 +00:00
Commented Feb 21, 2021 at 20:19 — Vishal Rajole
– Vishal Rajole, Commented Feb 21, 2021 at 20:19
react-router-dom : v 4.1.2

Cawboy
– Cawboy

2021-02-21 20:34:26 +00:00
Commented Feb 21, 2021 at 20:34 — Cawboy
– Cawboy, Commented Feb 21, 2021 at 20:34

Drew Reese · Accepted Answer · 2021-02-21 20:20:00Z

2

Issue

None of your nested paths are an exact match to "/" rendered by the PrivateRoute of the main router, so they are not rendered.

Solution

Place the parent routes in a Switch and reorder the routes so the "/login" path can be matched before the more general "/" path. Remove the exact prop from the "/" path.

App.js

return (
  <div>
    {message &&
      <div className={`alert ${type}`}>{message}</div>
    }
    <Router history={history}>
      <Switch>
        <Route path="/login" component={SignIn} />
        <PrivateRoute path="/" component={Main} />
      </Switch>
    </Router>
  </div>
);

Main.js

<main className={classes.content}>
  <Link to="/HomePage"> HomePage</Link>
  <Link to="/Admin"> Admin </Link>
  <Link to="/Menus"> Menu </Link>
  <Link to="/Product"> Product </Link>
  <div className={classes.appBarSpacer} />
  <Switch>
    <PrivateRoute path="/HomePage" component={HomePage} />
    <PrivateRoute path="/Admin" component={Admin} />
    <PrivateRoute path="/Menus" component={Menus} />
    <PrivateRoute path="/Product" component={Product} />
  </Switch>
</main>

answered Feb 21, 2021 at 20:20

Drew Reese

207k19 gold badges279 silver badges292 bronze badges

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

2 Comments

Cawboy Over a year ago

oh thank you. and another mistake I think was about <div> inside Router. but I cant imagine why i was wrong...?

Drew Reese Over a year ago

@Cawboy A div inside a Router is ok since routers inclusively render all matches, but a div inside a Switch would cause an issue as the div would be "matched" instead and everything inside would stop being matched for anything. The Switch component should render only Route (or variations like custom PrivateRoute etc...) or Redirect child components.

Collectives™ on Stack Overflow

Nested React Router

1 Answer 1

Issue

Solution

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Issue

Solution

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related