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已定义，所以没有问题。

我尝试了以下某些事项：

在构造函数中：

this.context = context;

在课堂上：

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

在导出之前（尝试使用＆amp; without function）：

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＆amp;

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

Answer 1

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

您正在（或我应该使用“ were”）试图在页面上3秒后强制执行新路线。这不应该是与历史相关的问题，因为您使用的react-router的版本是1.0.0-rc3（从查看代码的方式来看似乎不是）。

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

import { browserHistory } from 'react-router'

然后这样做：

browserHistory.push('/some/path')

Answer 2

一种解决方案是在自己的文件中创建历史记录并将其导出为：

import createHistory from 'history/createHashHistory'

export default createHistory()

然后，在定义应用程序时，执行以下操作：

import React from 'react'
import { Provider } from 'react-redux'
import { Router } from 'react-router-dom'

import history from '../history'

const Application = (props) => {
  return (
    <Provider store={props.store}>
      <Router history={history}>
        ...
      </Router> 
    </Provider>
  )
}

最后，每当您需要访问任何组件中的历史记录时，只需从导出的同一文件中导入它以推送您的下一个路径。有关详细信息，请参阅此帖here。

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

2 个答案: