React-router: "Cannot read property 'transitionTo' of undefined"

Question

I use webpack, ES6, react-router library and Link component for my links. I want to "transit" with parent div of link element, but when I click on div I get error:

Uncaught TypeError: Cannot read property 'transitionTo' of undefined

I followed this and this thread.

NavBar.jsx

var React = require('react');
var Router = require('react-router');
var { Route, DefaultRoute, RouteHandler, Link } = Router;

var CustomersIcon = require("./icons").CustomersIcon;

export class NavBar extends React.Component {

  constructor(props, context) {
      super(props, context);
  }

  _openLink() {
      this.context.router.transitionTo('/');
  }

  render() {
    return (
         <div className="menu-item-wrapper" onClick={this._openLink.bind(this)}>
             <CustomersIcon />
             <Link to="/customers" activeClassName="active" ref="customersLink">Customers</Link> 
          </div>
    );     
  }
}

NavBar.contextTypes = {
  router: function contextType() {
    return React.PropTypes.func.isRequired;
  }
};

Which version of react-router are you using? Also, `router: function contextType() { ... }` should be `router: React.PropTypes.func.isRequired`. — Alexandre Kirszenberg, Oct 30 '15 at 15:05

score 4 · Accepted Answer · answered Oct 30 '15 at 15:41

4

Your code uses the old router API. The API changed a lot from 0.13 to 1.0.0RC.

You want to retrieve the history object from context:

NavBar.contextTypes = {
  history: React.PropTypes.object.isRequired,
};

And to transition to another url, from within a NavBar method:

this.context.history.pushState(null, '/');

See the History Mixin API.

You can also specify a more precise history contextType using the history propType exposed by the library:

var RouterPropTypes = require('react-router').PropTypes;

Navbar.contextTypes = {
  history: RouterPropTypes.history,
};

answered Oct 30 '15 at 15:41

Alexandre Kirszenberg

35,938
10
88
72

Aren't Mixins being moved out of React in ES6 though? – Nick Pineda Nov 13 '15 at 06:48
@NickPineda There are no plans to get rid of mixins at the moment. While it is true that components as ES6 classes or pure functions do not support mixins, there are other ways to implement mixin-like functionality. See https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750. – Alexandre Kirszenberg Nov 13 '15 at 07:59

alexpods · Answer 2 · 2015-10-30T21:44:40.160

2

router was removed from context in 1.0 version (see upgrade doc here) Now in context you have history and location (see here). Try this:

this.context.history.pushState(null, '/');
//...
NavBar.contextTypes = {
  history: React.PropTypes.object.isRequired,
};

edited Oct 30 '15 at 21:44

answered Oct 30 '15 at 15:40

alexpods

47,475
10
100
94

score 0 · Answer 3 · answered Oct 30 '15 at 15:13

0

Your definition of contextTypes looks wrong. It should be

NavBar.contextTypes = {
  router: React.PropTypes.func.isRequired
};

answered Oct 30 '15 at 15:13

kulesa

2,964
20
11

score 0 · Answer 4 · answered Oct 30 '15 at 15:39

In the React Router 1.0 there is no router on the context anymore. It was replaced by location:

NavBar.contextTypes = {
  location: React.PropTypes.object
}

you can find more about the changes in the 1.0 version in the Upgrade Guide.

Also there is no transitionTo you would use history for that and do something like: this.history.pushState(null, '/somePath'). Definitely check the Upgrade Guide.

score 0 · Answer 5 · edited May 23 '17 at 10:28

0

This answer provides the way to programmatically redirect with react-router 2.0.0.

Relevant bit:

import { browserHistory } from './react-router' browserHistory.push('/some/path')

edited May 23 '17 at 10:28

Community

1
1

answered May 09 '16 at 07:07

charlie

181
13

React-router: "Cannot read property 'transitionTo' of undefined"

5 Answers5