反應路由器browserHistory.push不重定向

Question

試圖使用browserHistory.push方法以編程方式更改我的路線。

它會更改路線（每個瀏覽器地址欄）但不更新視圖。

這裏是我的代碼 App.jsx

const AppStart = React.createClass({ 

    render: function() { 
    return (
     <MuiThemeProvider> 
     <Router history={hashHistory}> 
      <Route path="/" component={Main}> 
      <Route path="experiences" component={Experiences} /> 
      <Route path="people" component={Profiles} /> 
      <Route path="login" component={Login} /> 
      <IndexRoute component={Home}/> 
      </Route> 
     </Router> 
     </MuiThemeProvider> 
    ); 
    } 
}); 

ReactDOM.render(
    <AppStart />, 
    document.getElementById('app') 
); 

組件：

handleLoginRedirect(e) { 
    browserHistory.push('/experiences'); 
    }, 

    render() { 
    return (
     <div className='row'> 
     <div className='col-sm-10 col-sm-offset-1'> 
      <form role='form'> 
      <RaisedButton label="Redirect" onClick={this.handleLoginRedirect} /> 
      </form> 
     </div> 
     </div> 
    ); 

Answer 1

當您推入browserHistory時，您的路由器配置使用hashHistory。

很容易錯過這樣的事情，這是可以理解的。

• 更換hashHistory與browserHistory在Router像這樣：

<Router history={browserHistory}>

全段：

const AppStart = React.createClass({ 

    render: function() { 
    return (
     <MuiThemeProvider> 
     <Router history={browserHistory}> 
      <Route path="/" component={Main}> 
      <Route path="experiences" component={Experiences} /> 
      <Route path="people" component={Profiles} /> 
      <Route path="login" component={Login} /> 
      <IndexRoute component={Home}/> 
      </Route> 
     </Router> 
     </MuiThemeProvider> 
    ); 
    } 
}); 

Answer 2

如果您正在使用最新的反應，路由器API，你需要使用：

this.props.history.push('/path/goes/here'); 

您可能需要綁定此給你的函數訪問this.props（注：可能）：當

onClick={this.handleLoginRedirect.bind(this)} 

請參考以下問題關於這一主題的所有信息：

Programmatically navigate using react router