React Router: изменение компонентов и маршрутов кнопкой

Question

В приложении React есть страница с 2 кнопками. Каждая кнопка отображает отдельный компонент, однако маршрут / URL не меняется. Как я могу изменить маршрут, меняя только серую зону? и Как я могу изменить состояние, если пользователь переходит непосредственно к URL?

https://codesandbox.io/embed/elastic-fog-7hqk9?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Да, вы можете использовать Switch, он будет отображать ваш компонент, если он соответствует URL. Вот пример:

<Container>
  <Header />    // this will render in all cases (Fixed here for example)
  <Switch>
    <Route exact path="/component1" component={Component1} />
    <Route exact path="/component2" component={Component2} />
  </Switch>
</Container>