javascript - Required context `router` was not specified. Check the render method of `RoutingContext` - Stack Overflow

admin管理员组

文章数量:1313001

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 ponent:

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

export default class Component extends React.Component {

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

    ponentDidMount () {
        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='/' ponent={ App }>
            <IndexRoute ponent={ Component } />
        </Route>
    </Router>
, document.getElementById('app-container'));

The issue is that 'router' property is not passed into the ponent. 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?

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 ponent:

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

export default class Component extends React.Component {

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

    ponentDidMount () {
        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='/' ponent={ App }>
            <IndexRoute ponent={ Component } />
        </Route>
    </Router>
, document.getElementById('app-container'));

The issue is that 'router' property is not passed into the ponent. 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?

• javascript
• reactjs
• react-router
• ecmascript-harmony

Share Improve this question Follow edited Nov 10, 2015 at 2:49 zaaath asked Nov 9, 2015 at 19:39 zaaathzaaath 77799 silver badges1818 bronze badges 2

• I followed advice from stackoverflow./questions/32033247/… created constructor and changed value of 'router' context type, but the result is 'transitionTo' is still not available. – zaaath Commented Nov 9, 2015 at 19:46
• PayPal developers had similar issue but it was closed github./paypal/react-engine/issues/82 – zaaath Commented Nov 9, 2015 at 19:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 ponent includes history (the new style of navigation - https://github./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('./mon/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;

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.

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

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

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

本文标签：