Question

当我导出像：

这样的组件时

export default class Link extends React.Component{

  onLogout() {
    this.props.history.push('/');
  }

与此绑定的按钮会正确更改react-router v4中的页面。

但是，在我的main.js文件中，我目前正试图获得类似的内容：

if (insert conditional here) {
    this.props.history.push('/');
  }

上班。但它只是给我一个类型错误。

'Uncaught TypeError: Cannot read property 'history' of undefined'.

我确实安装了所有正确的依赖项，并且它在我的其他组件中运行正常。我现在在主js文件中有这个if语句（它是一个我正在练习理解v4的小项目），所以我想它可能是因为我没有扩展一个类。

有没有人知道为什么相同的代码不能在主文件中工作，是否有解决方法？所有的react-router v4变化都让这个新手感到困惑。

Answer 1

这意味着未定义this.props，因为您在回调中使用this.props this并非您认为的那样。要解决此问题，请使用以下回调：

<button onClick={this.onLogout.bind(this)}>

而不是

<button onClick={this.onLogout}>

您也可以

import { browserHistory } from 'react-router'

... browserHistory.push('/');

编辑：关于后者，你也可以用这个包装你的组件：

import { withRouter } from 'react-router';

// in YourComponent:
... this.props.router.push('/');

export default withRouter(YourComponent);

可能比browserHistory更好，因为您不必指定历史记录类型（可以更改为hashHistory并且仍然可以使用）。

Answer 2

我建议你不要直接在历史中使用地址，而是使用。

您可以将用户发送到该页面，您可以有条件地检查是否允许他查看内容，如果是，则渲染方法渲染返回组件返回

这会产生更清晰的代码。