Как использовать React Router для маршрутизации на другой URL и повторного рендеринга страницы с НОВЫМ компонентом?

Question

В App.js у меня есть кнопка, которая, если вы нажмете, перенаправит пользователей, использующих React-Route, на другой URL, /landingpagehahaha, и отобразит компонент с именем LandingPage. Тем не менее, ни URL-адрес не изменяется в моем браузере, ни правильный компонент отображается. Сейчас, когда вы нажимаете кнопку, происходит следующее: текущая страница перерисовывается, а не правильный компонент LandingPage.

Логика React-Route находится в функции, называемой routeChange(). Я поместил в него 2 оператора alert (), которые вызывают, сообщая мне, что он попадает внутрь этой функции. Однако больше ничего не меняется.

Я пытался использовать this.props.history.push("./LandingPage"); в routeChange(), но это утверждение не проходит. Похоже, что он ведет себя как response.json(), который возвращается из функции после запуска.

Я также пытался использовать withRouter(), но я получаю странную ошибку, которую не могу вызвать Route внутри Router. Я не смог решить эту проблему.

// Changes route
  routeChange() {
    alert("HELLO BEFORE");
    alert("HELLo");
    return (
      <div>
        <Route path="/landingpagehahaha" component={LandingPage} />;
      </div>
    );
  }

// The button that is supposed to bring user to next page
<button onClick={this.routeChange}>Go To Next Page</button>

Answer 1

Вам необходимо вернуть компонент Redirect из функции рендеринга или использовать API истории, чтобы протолкнуть маршрут в стек навигации.Первое, что вы должны сделать, это переместить объявление маршрута и поднять его выше в иерархии вашего компонента, вы должны убедиться, что объявление маршрута выдается при попытке перейти к маршруту.Вместо использования истории API, вы также можете использовать компонент Redirect, предоставляемый Reaction-router.Я сделал небольшой пример здесь.https://codesandbox.io/s/bold-paper-kxcri