路由问题:尝试重新路由时未定义 this.context.router
Posted
技术标签:
【中文标题】路由问题:尝试重新路由时未定义 this.context.router【英文标题】:Routing issue: this.context.router not defined when trying to re-route 【发布时间】:2016-01-17 19:59:20 【问题描述】:我正在尝试在 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');
aka this.context.router 未定义。
this.context 已定义,所以没有问题。
我尝试了以下一些方法:
在构造函数中: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"
【问题讨论】:
【参考方案1】:已经有一个答案解释了如何以编程方式为每个 react-router 版本强制一个新路由: https://***.com/a/31079244/5810646
您正在(或者我应该使用“是”)试图在您的页面上 3 秒后强制使用新路由。这不应该是与历史相关的问题,因为您使用的 react-router 版本是 1.0.0-rc3 (顺便说一句,这似乎不是您的代码)。
如果您使用 react-router 2.x.x,您可以利用历史记录推送新路由:
import browserHistory from 'react-router'
然后做:
browserHistory.push('/some/path')
【讨论】:
感谢您的回答和抱歉:我以为我删除了这篇文章。这是 react 的早期版本之一和一个非常古老的 react-router 版本:')。我很确定现在所有的代码都已经过时了.. 我还是回答了,因为 SO 向我建议了这个问题,如果有人遇到同样的问题,它可能会很有用,但不确定是否可以回答这个老问题。 是的,你永远不知道 :)。谢谢你的回答:)。【参考方案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的主要内容,如果未能解决你的问题,请参考以下文章