未指定所需的上下文“路由器”。检查 `RoutingContext` 的渲染方法答案

【问题标题】：Required context `router` was not specified. Check the render method of `RoutingContext`未指定所需的上下文“路由器”。检查 `RoutingContext` 的渲染方法
【发布时间】：2016-02-10 13:21:10
【问题描述】：

我的应用是带有 react-router 的 ES6 React 应用。我想在一小段延迟后将用户重定向到不同的页面。这是我的 React 组件：

import React from 'react'
import { Navigation } from 'react-router'

export default class Component extends React.Component {

    render () {
        return (
            <div>Component content</div>
        )
    }

    componentDidMount () {
        setTimeout(() => {
            // TODO: redirect to homepage
            console.log('redirecting...');
            this.context.router.transitionTo('homepage');
        }, 1000);
    }

}

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

和react-router路由表：

render(
    <Router>
        <Route path='/' component={ App }>
            <IndexRoute component={ Component } />
        </Route>
    </Router>
, document.getElementById('app-container'));

问题是“路由器”属性未传递到组件中。 Chrome 控制台的内容是：

Warning: Failed Context Types: Required context `router` was not specified in `Component`. Check the render method of `RoutingContext`.
redirecting...
Uncaught TypeError: Cannot read property 'transitionTo' of undefined

React 版本是 0.14.2，react-router 版本是 1.0.0-rc4 我在哪里犯错了？

【问题讨论】：

我按照stackoverflow.com/questions/32033247/… 的建议创建了构造函数并更改了“路由器”上下文类型的值，但结果是“transitionTo”仍然不可用。
PayPal 开发者也有类似问题，但已关闭github.com/paypal/react-engine/issues/82

标签： javascript reactjs react-router ecmascript-harmony

【解决方案1】：

查看1.0.0 upgrade guide 并将this.props.history 与pushState 或replaceState 一起使用。 context 用于其他组件（不是路由组件）。来自升级指南：

// v1.0
// if you are a route component...
<Route component={Assignment} />

var Assignment = React.createClass({
  foo () {
    this.props.location // contains path information
    this.props.params // contains params
    this.props.history.isActive('/pathToAssignment')
  }
})

【讨论】：

【解决方案2】：

我倾向于说this.context.router 不再存在。我遇到了同样的问题，看起来我们应该使用this.context.history 和this.context.location 来实现这些功能。如果我得到了一些工作，我会尝试更新这个响应。

【讨论】：

【解决方案3】：

无论如何，我都不是 react-router 专家，但我今天早些时候遇到了同样的问题。我正在使用 React 0.14.2 和 React-Router 1.0（这是最近几天才出现的，如果不是最近的话）。在调试时，我注意到 React 组件上的 props 包含历史记录（新的导航样式 - https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md）

我也在使用 TypeScript，但我的代码如下所示：

import React = require('react');
import Header = require('./common/header.tsx');

var ReactRouter = require('react-router');

interface Props extends React.Props<Home> {
    history: any
}

class Home extends React.Component<Props, {}> {
    render(): JSX.Element {
        return (
            <div>
                <Header.Header MenuItems={[]} />
                <div className="jumbotron">
                    <h1>Utility</h1>
                    <p>Click on one of the options below to get started...</p>
                    {<a className="btn btn-lg" onClick={() => this.props.history.pushState(null, '/remoteaccess') }>Remote Access</a>}
                    {<a className="btn btn-lg" onClick={() => this.props.history.pushState(null, '/bridge') }>Bridge</a>}
                </div>
            </div>
        );
    }
}

module.exports = Home;

【讨论】：