Route inside Route - nesting routes - react.js

Question

I have been looking for an answer to my question on github already, but nothing works for me..

My problem is that when I use Link in Reservation component it changes the path, but doesn't change change the visible component and the page become empty. Summary component should just render h1 with some text for now. What I have to do for these components to work?

And btw I use react v16.13.1 and react-router-dom v4.3.1

/* App component */

const App = () => (
  <Router>
    <div className="app">
      <Navigation />

      <hr />

      <Switch>
        <Route exact path="/" component={LandingPage} />
        <Route exact path="/sign-in" component={SignInPage} />
        <Route exact path="/pw-forget" component={PasswordForgetPage} />
        <Route exact path="/reservation" component={Reservation} />
        <Route exact path="/account" component={AccountPage} />
        <Route exact path="/reservations" component={Reservations} />
      </Switch>

    </div>
  </Router>
);

/* Reservation component */

class Reservation extends React.Component {

  render() {
    return (

         <Link to="/reservation/summary">Podsumowanie</Link>

        <Switch>
          <Route exact path="/reservation/summary" component={Summary} />
        </Switch>
      </div>
    );
  }
}

score 2 · Accepted Answer · answered Apr 06 '20 at 14:33

2

The problem is gonna be with the routing in your App component, you only have an exact route to /reservation.

So you're probably gonna wanna change it something like

<Route exact path="/" component={LandingPage} />
<Route exact path="/sign-in" component={SignInPage} />
<Route exact path="/pw-forget" component={PasswordForgetPage} />
<Route exact path="/account" component={AccountPage} />
<Route exact path="/reservations" component={Reservations} />
<Route path="/reservation" component={Reservation} />

The key is taking the exact prop off so it will match any path following /reservation

answered Apr 06 '20 at 14:33

Tom Finney

2,670
18
12

I even have found a github project, with the structure exactly like that and mine was still not working. That's the reason I asked a question here – nightspite Apr 06 '20 at 14:52
1

I tried what I suggested in a sandbox and it works fine: https://codesandbox.io/s/epic-rubin-8hhdp e.g. the `Summary` part renders on the nested route ok. Also, you have a syntax error in your `Reservation` component as you are missing the opening tag for the ` ` – Tom Finney Apr 06 '20 at 14:59
So, yes I don't have the opening tag, because I simplified the code for a better read. After a while, I get where the problem was and your answer was very helpful. Thank you for your time. – nightspite Apr 06 '20 at 15:47

Route inside Route - nesting routes - react.js

1 Answers1