javascript - React router 2.6.0 如何在点击函数内重定向

Question

我在使用react-router时遇到问题。我想用 firebase 和 React 构建一个登录系统。

当用户点击“登录”按钮并通过用户名和密码验证后，页面将重定向至首页。

我的路线是这样的:

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path='/'>
      <IndexRoute component={Index}></IndexRoute>
      <Route path='/start' component={Layout}></Route>
    </Route>
  </Router>,
app);

Index组件是登录页面。

这是我的点击函数:

Jump(){
    var password = this.refs.password.value;
    var email = this.refs.username.value;
    console.log(email, password);
    
    firebase.auth().signInWithEmailAndPassword(email, password)
    .catch(function(error) {
      // Handle Errors here.
      var errorCode = error.code;
      var errorMessage = error.message;
      // ...
    })
    .then(function(res){
      if(res !== undefined){
        browserHistory.push('/#/start');
      //want to do the redirect here.
      }
    })

  }

我已经尝试过 browserHistory.push() 但它不起作用。有人知道如何重定向到函数内部吗？真的很感激!

Answer 1

由于您在路由配置中使用了 hashHistory，因此您可以简单地这样编写。

hashHistory.push('/start')

此外，路由配置中的路径不需要额外的斜杠。

改变

<Route path='/start' component={Layout}></Route>

到

<Route path='start' component={Layout}></Route>