路由问题:尝试重新路由时未定义 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的主要内容,如果未能解决你的问题,请参考以下文章

在 vuex 操作中调用时未定义路由器

在路由更改上使用过滤器时未渲染路由模型

AngularJS:使用ngRoute路由时未加载组件控制器

初始化 SocketIO 时未调用 HTTP 路由

使用浏览器路由时未终止的jsx内容?

导航到路由参数时未调用 ngOnInit