React Router with Nested Layouts

Question

I am having some issues with react routes and not sure what is the appropriate way to accomplish what I am trying.

I read in react router v4 parents should render their children so I have something like this

<Switch>
  <Route exact path='/' component={FrontEndContainer} />
  <Route exact path='/dashboard' component={AuthContainer}>
  <Route exact path='/login' component={LoginPage} />
</Switch>

const FrontEndContainer = () => {
  return (
    <div>
      <Navigation />
      <main>
        <Header />
        <Route exact path='/' component={HomePage} />
        <Route path='/about' component={AboutPage} />
        <Route path='/contact' component={ContactPage} />
      </main>
      <Footer />
    </div>
  );
};
export default FrontEndContainer;

This works if you navigate to http://example.com but when you try and navigate to http://example.com/about does not render. I realize its because of the exact but if I don't have the exact, when you navigate to http://example.com/login the FrontEndContainer is rendered without the inner components and the login page.

My goal is that when the user navigates to the login page, the FrontEndContainer is not rendered and when the navigate to / or /about the FrontEndContainer is rendered and the inner containers.

I feel I am missing something very simple...

Thanks in advance for pointing out the mistake!

score 0 · Accepted Answer · answered Dec 29 '19 at 21:14

0

Have you tried reordering the statements in the Switch block like so? That way the FrontEndContainer will be rendered in any route that doesn't match with any of the previous components.

<Switch>
  <Route exact path='/dashboard' component={AuthContainer}>
  <Route exact path='/login' component={LoginPage} />
  <Route path='/' component={FrontEndContainer} />
</Switch>

answered Dec 29 '19 at 21:14

Ismael Padilla

5,246
4
23
35

Hi! I did but in this case it renders the login page first and then it also renderes the FrontEndContainer as well. So I feel that you have to have . – xjinx Dec 29 '19 at 21:33
That's weird, since `Switch` should only render the first component that matches the location ([source](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md)). So if you go to the `/login` route, the `FrontEndContainer` component should not be rendered by `Switch`. If you're still seeing it, then I'm sure it's being rendered by some other component. – Ismael Padilla Dec 29 '19 at 21:38
Hmmm, i think I might not hit save.... because I think it's working now. Thank you! – xjinx Dec 29 '19 at 21:52

React Router with Nested Layouts

1 Answers1