javascript - 尝试重新路由时未定义路由问题 : this. context.router

Question

我试图在 n 秒后自动更改路径。 (不使用 <Link to="/home">Home</Link> )。

我的代码是这样的:

class ComponentName extends Component {
  constructor (props, context) {
    super(props, context);
  }
  componentDidMount () {
    setTimeout(function(){
      this.context.router.transitionTo('/home');
    }.bind(this), 3000)
  }
  render() {return (<div>..will go to the home page</div>)}
}

ComponentName.contextTypes = {
  router: function () { 
    return React.PropTypes.func.isRequired;
  }
};
export default ComponentName;

这是我遇到的错误

Uncaught TypeError: Cannot read property 'transitionTo' of undefined在线this.context.router.transitionTo('/home');又名 this.context.router 未定义。

this.context 已定义，所以 afaik 没问题。

我已经尝试了以下一些事情:

在构造函数中:

this.context = context;

在类里面:

static contextTypes: {
  history: React.PropTypes.object,
  location: React.PropTypes.object,
  router: React.PropTypes.func.isRequired
}

导出前(尝试使用和不使用功能):

ComponentName.contextTypes = {
  router: React.PropTypes.func.isRequired
}

我也试过将路由更改为历史记录，或者只是在上下文中调用函数:

this.context.history.transitionTo('/home');
this.context.transitionTo('/home');
this.transitionTo('/home');

事实是 this.context.router 仍然未定义，我搜索了更多主题(主要是这个:https://github.com/rackt/react-router/issues/975)，但仍然找不到适合我的东西。

注意:我使用的是 ES6 &

"react": "^0.14.0",
"react-router": "^1.0.0-rc3"

Answer 1

已经有一个答案解释了如何以编程方式为每个 react-router 版本强制一个新路由: https://stackoverflow.com/a/31079244/5810646

您正在(或者我应该使用"is")试图在您的页面上 3 秒后强制执行一条新路线。它不应该是与历史相关的问题，因为您使用的 react-router 版本是 1.0.0-rc3(顺便看一下您的代码，这似乎不是)。

如果您使用的是 react-router 2.x.x，您可以利用历史推送新路由:

import { browserHistory } from 'react-router'

然后做:

browserHistory.push('/some/path')