Required context `router` was not specified. Check the render method of `RoutingContext`

Question

My app is ES6 React application with react-router. I want to redirect user to a different page after a small delay. Here is my React component:

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
}

And react-router routing table:

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

The issue is that 'router' property is not passed into the component. Chrome console's content is:

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 version is 0.14.2, react-router version is 1.0.0-rc4 Where do I make mistake?

I followed advice from http://stackoverflow.com/questions/32033247/react-router-transitionto-is-not-a-function/33008706#33008706 created constructor and changed value of 'router' context type, but the result is 'transitionTo' is still not available. — zaaath, Nov 09 '15 at 19:46
PayPal developers had similar issue but it was closed https://github.com/paypal/react-engine/issues/82 — zaaath, Nov 09 '15 at 19:47

score 4 · Accepted Answer · answered Nov 10 '15 at 00:53

Im not a react-router expert by any means, but I had the same issue earlier today. I am using React 0.14.2 and React-Router 1.0 (this just came out in the last couple of days, if not more recently). While debugging I noticed that the props on the React component includes history (the new style of navigation - https://github.com/rackt/react-router/blob/master/docs/guides/basics/Histories.md)

I am also using TypeScript, but my code looks like the following:

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;

score 4 · Answer 2 · answered Dec 31 '15 at 21:38

I'm inclined to say that this.context.router doesn't exist anymore. I've run into the same problem and it looks like we're supposed to implement these features using this.context.history as well as this.context.location. If I get something working, I'll try updating this response.

score 1 · Answer 3 · answered Jan 18 '16 at 13:29

See the 1.0.0 upgrade guide and use this.props.history with pushState or replaceState. context is used for other components (not route components). From the upgrade guide :

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

Required context `router` was not specified. Check the render method of `RoutingContext`

3 Answers3