路由器v4以编程方式改变路由

时间:2017-04-07 16:19:10

标签: reactjs browser-history react-router-v4

似乎无法在此找到更多高质量的文档。 React Router v4文档包含“历史”对象的信息,但声明它是可变的,不应更改。我见过的很多例子看起来像'黑客'。任何见解都将不胜感激。

1 个答案:

答案 0 :(得分:0)

作为一名反应新手,我不得不一直在努力解决这个问题。虽然@ToddChaffee提供的链接可以为您提供良好的洞察力,但this主题突出显示,当您将<Router/>作为顶级组件时,历史对象会自动作为道具传递。这使得它比分别使用createBrowserHistory()方法单独加载历史对象简单得多。

以下对我有用:

<Route exact path='/' render={({history}) => 
  <Home infoHandler={this.handleUserInfo} 
    imageHandler={this.handleImage} 
    history={history}/>
}/>

然后在组件内部,您可以:

this.props.history.push('/routeYouWantToGoTo');

在导出模块之前,不要忘记对组件中的prop进行类型检查:

Home.propTypes = {
  history: React.PropTypes.object
}

export default Home;