Javascript 未指定所需的上下文“路由器”。检查'RoutingContext'的呈现方法`

我的应用程序是带有React路由器的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版本为0.14.2，React路由器版本为1.0.0-rc4

---

我哪里会出错？

我无论如何都不是react路由器专家，但今天早些时候我也遇到了同样的问题。我正在使用React 0.14.2和React Router 1.0（这是最近几天发布的，如果不是最近的话）。调试时，我注意到React组件上的道具包含历史记录（新的导航样式-）

我也在使用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;

import React=require（'React'）；
导入标题=require（'./common/Header.tsx'）；
var ReactRouter=require（'react-router'）；
界面道具扩展了React.Props{
历史：有吗
}
类Home扩展了React.Component{
render（）：JSX.Element{
返回(
效用
单击下面的一个选项开始

{this.props.history.pushState（null，/remoteaccess'）}>remoteaccess}
{this.props.history.pushState（null，/bridge'）}>bridge}
);
}
}
module.exports=Home；

我倾向于说，

这个.context.router

已经不存在了。我遇到了同样的问题，看起来我们应该使用

this.context.history

以及

this.context.location

来实现这些功能。如果我的某些功能正常，我将尝试更新此响应。

请参阅并使用

this.props.history

和

pushState

或

replaceState

<代码>上下文用于其他组件（非管线组件）。 从升级指南：

// 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')
  }
})

//v1.0
//如果您是管线组件。。。
var赋值=React.createClass({
foo（）{
this.props.location//包含路径信息
this.props.params//包含参数
this.props.history.isActive（“/pathToAssignment”）
}
})

我遵循了创建的构造函数的建议，更改了“router”上下文类型的值，但结果是“Transitiono”仍然不可用。PayPal开发人员也有类似的问题，但已关闭

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;

// 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')
  }
})