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