为什么我的 context.router 在我的反应组件中未定义？

Question

我试图从我的组件中访问我的 router，但它是未定义的。这是我的 router:

React.render(
    <Provider store={store}>
        {() =>
            <Router>
                <Route path="/" component={LoginContainer} />
            </Router>
        }
    </Provider>,
    document.getElementById('app')
);

这是容器：

class LoginContainer extends React.Component {
  constructor() {
    super();
  }

  static propTypes = {
    handleLogin: PropTypes.func.isRequired
  }

  static contextTypes = {
    router: React.PropTypes.object
  }

  handleLogin() {
    this.props.dispatch(Actions.login(null, null, this.context.router));
  }

  render() {
    return (
      <Login
        auth={this.props}
        handleLogin={this.handleLogin}
       />
    );
  }
}

function mapStateToProps(state) {
  return {
    stuff: []
  }
}


export default connect(mapStateToProps)(LoginContainer);

最后是组件：

import React, { PropTypes } from 'react';

class Login extends React.Component {
    static propType = {
        handleLogin: PropTypes.func.isRequired
    }
    static contextTypes = {
        router: React.PropTypes.object
    }
    render() {
        return (    
            <div className="flex-container-center">
                <form>
                    <div className="form-group">
                        <button type="button" onClick={this.props.handleLogin}>Log in</button>
                    </div>
                </form>
            </div>
        );
    }
}

module.exports = Login;

当我点击 login 按钮时，它会点击容器中的 handleLogin。在我的 handleLogin 中，我的 this 值为 undefined。我尝试将 this 绑定到 constructor 中的函数，但它仍然是 undefined。

此外，当我在 render 函数中放置一个断点时，我有一个 this.context.router，但它是 undefined。如何让 this 在 handleLogin 中正确，以及如何确保 router 在 context 而不是 undefined？

Answer 1

了解变化的最佳方式是浏览 Releases 页面。

在 > 1.0.0-beta3 和 < 2.0.0-rc2 的 React Router 版本中，没有 context.router。相反，您需要查找 context.history.

如果您使用版本 <= 1.0.0-beta3 或 >= 2.0.0-rc2，则 context.router 就在那里。简而言之，发生的事情是它被删除以支持 history 但随后维护人员决定最好将历史库 API 隐藏在路由器后面，因此他们将 router 上下文带回2.0 RC2 及更高版本。

Answer 2

我遇到了同样的问题，我想从需要身份验证才能打开的组件重定向到登录页面。

我用过 this.context.router.push('/login') 它对我不起作用。

我们可以通过 props 到达路径，所以我对其进行了编码 this.props.history.push('./login') 因为我使用 redux store 它将更新 props 中的路径并将重定向到主页。

componentWillMount() {
        if(!this.props.isAuthenticated){
            // redirect
            this.props.history.push('/login');
        }
    }

当组件打开时（由高阶组件包装），它将检查用户是否已通过身份验证。如果未通过身份验证，它将重定向到主页。

为什么我的 context.router 在我的反应组件中未定义？

Why is my context.router undefined in my react component?

reactjs

redux