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组件，或者使用history API将路线推送到导航堆栈中。您应该做的第一件事是移出路线声明，并在组件层次结构中发挥更高的作用，当您尝试前往路线时，必须确保呈现了路线声明。除了使用历史记录api，您还可以使用react-router提供的Redirect组件。我在这里做了一个小例子。 https://codesandbox.io/s/bold-paper-kxcri

如何使用React Router路由到另一个URL并使用NEW组件重新渲染页面？

1 个答案: