如何手动触发路由的更改，使用function Router-v4(像<Link>那样)，但在函数内部手动触发呢？

Question

我正在使用react-router-v4，和React进行一个项目，并试图找到一种手动触发路由更改的方法。

类似于<Link to="/newpage">组件，它带您进入一条新的路径。

但我想从我的方法中手动完成，

有点像this.router.location = "/newpage"。

Answer 1

如何使用withRouter高阶组件？

https://reacttraining.com/react-router/web/api/withRouter

class GoToNewPageButton extends React.Component {
  navigateToNewPage() {
    this.props.history.push('/newpage');
  }

  render() {
    return <button onClick={this.navigateToNewPage.bind(this)}>To the new page!</button>
  }
}

const GoToNewPageWithHistory = withRouter(GoToNewPageButton);

Answer 2

使用由this.props.history.push组件或由withRouter高阶组件公开的<Link>方法，如上面的答案中提到的PompolutZ。

这样的一个例子是<button onClick={() => this.props.history.push('/Home') } />

Answer 3

呈现一个将导航到新位置的重定向组件。

<Redirect to="/somewhere/else"/>

有关更多详细信息，请查看这里的文件。