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

当您推送hashHistory时，您的路由器配置使用browserHistory。

很容易错过这样的事情，这是可以理解的。

将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

如果您使用的是最新的react-router api，则需要使用：

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

访问 this.props 时，您可能需要将此绑定到您的函数（注意： 可能）：

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

有关此主题的所有信息，请参阅以下问题：

Programmatically navigate using react router

React-router browserHistory.push没有重定向

2 个答案: