Маршрут внутри Маршрута - гнездовые маршруты - реагирует. js

Question

Я уже искал ответ на свой вопрос на github, но у меня ничего не работает ..

Моя проблема в том, что когда я использую компонент Ссылка в резервировании, он меняет путь, но не изменить изменить видимый компонент и страница станет пустой. Сводный компонент должен просто визуализировать h1 с некоторым текстом на данный момент. Что я должен сделать, чтобы эти компоненты работали?

И, кстати, я использую реагировать v16.13.1 и реагировать-маршрутизатор-дом v4.3.1

/ * Компонент приложения * /

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

/ * Компонент бронирования * /

class Reservation extends React.Component {

  render() {
    return (

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

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

Answer 1

Проблема будет связана с маршрутизацией в вашем компоненте приложения, у вас есть только точный маршрут к /reservation.

Так что вы, вероятно, захотите изменить что-то вроде

<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} />

Ключ снимает опору exact, поэтому он будет совпадать с любым путем, следующим за /reservation