React Router запускает маршрут с историей

Question

Я пытаюсь сделать очень простой c процесс маршрутизации, когда у меня есть домашняя страница, и на этой домашней странице при нажатии на кнопку я перенаправляюсь на следующую страницу. У меня есть 3 компонента - « App, HomePage и NextPage ». Я использую объект истории, чтобы pu sh новый URL, и эта часть работает.

Однако я не уверен, как на самом деле вызвать новый маршрут (например, заставить компонент приложения визуализировать новый маршрут. Мой код выглядит следующим образом:

    export default function App() {

      return (
        <Router>
          <div>
            <Switch>
             <Route path="/">
               <HomePage/>
             </Route>
              <Route path="/nextpage">
                <NextPage/>
              </Route>
            </Switch>
          </div>
        </Router>
      );
    }

    function HomePage () {
      let history = useHistory();

      function handleClick() {
        history.push("/nextpage");
      }

      return (
        <div>this is the home page
          <button type="button" onClick={handleClick}>Display next page</button>
        </div>
      )
    }
    export default withRouter(HomePage);


    function NextPage () {
      return (
        <div>You just arrived to the next page!</div>
      )
    }

    export default NextPage;

Любая идея, какой шаг я Я прочитал документацию, но мне не ясно, кто именно запускает рендеринг на компоненте NextPage, так как нажатие кнопки только изменяет объект истории.

Answer 1

теперь вижу! Ваш код не отображает следующую страницу, потому что условие для HomePage все еще выполняется, попробуйте добавить «точный» к вашему первому маршруту, например так:

<Route exact path="/">
           <HomePage/>
</Route>

Это потому, что при использовании Switch он будет отображаться, когда первое условие маршрута возвращает истину и остановится на этом. Некоторые ссылки: https://reacttraining.com/react-router/core/api/Prompt Удачного кодирования! : D И добро пожаловать в стек переполнения !!!