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而不是$subtitleArr[] = json_encode( array('src'=>'some-url/subtitle.vtt', 'label'=>'English', 'kind'=>'captions') );？

Answer 1

跟上变化的最佳方法是浏览Releases页面。

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

如果您使用版本<= 1.0.0-beta3或>= 2.0.0-rc2，context.router就在那里。简而言之，发生的事情是它被删除而转而支持history但是后来维护者决定最好隐藏路由器后面的历史库API，因此他们回到2.0 RC2中的router上下文并继续

Answer 2

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

我用过 map(select(.name == "bulba") | .url.moves[].move.name | [., $b[.][]])对我不起作用。

我们可以通过道具到达路径，所以我将其编码为this.context.router.push('/login')，因为我与redux store合作，它将更新道具中的路径并将其重定向到首页。

this.props.history.push('./login')

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

为什么我的react.router在我的react组件中未定义？

2 个答案: