React-router: Uncaught TypeError: Cannot read property 'push' of undefined

[bodokaiser]

Version

2.0.1

Test Case

https://gist.github.com/bodokaiser/8482e0932fe242967c8f

Steps to reproduce

1. Clone Gist
2. mkdir app && mv app-index.js app/index.js
3. npm install && npm start
4. Click on links
   

   Expected Behavior

Router should dispatch route when clicking on link.

Actual Behavior

Nothing happens.

ReactErrorUtils.js:71 Uncaught TypeError: Cannot read property 'push' of undefined
handleClick @   Link.js:124
ReactErrorUtils.invokeGuardedCallback   @   ReactErrorUtils.js:71
executeDispatch @   EventPluginUtils.js:79
executeDispatchesInOrder    @   EventPluginUtils.js:102
executeDispatchesAndRelease @   EventPluginHub.js:43
executeDispatchesAndReleaseTopLevel @   EventPluginHub.js:54
forEachAccumulated  @   forEachAccumulated.js:23
processEventQueue   @   EventPluginHub.js:259
runEventQueueInBatch    @   ReactEventEmitterMixin.js:18
handleTopLevel  @   ReactEventEmitterMixin.js:34
handleTopLevelWithoutPath   @   ReactEventListener.js:93
handleTopLevelImpl  @   ReactEventListener.js:73
perform @   Transaction.js:136
batchedUpdates  @   ReactDefaultBatchingStrategy.js:62
batchedUpdates  @   ReactUpdates.js:94
dispatchEvent   @   ReactEventListener.js:204

Here seems to be the problem Link.js:124:

this.context.router.push(_location);

[taion]

Thanks for your question!

We want to make sure that the GitHub issue tracker remains the best place to track bug reports and feature requests that affect the development of React Router, and per the issue template, we are not handling support requests here.

If you have a question or otherwise need help, please post on Stack Overflow with the #react-router tag at https://stackoverflow.com/questions/ask?tags=react-router, or drop in on the #react-router room on Reactiflux at https://discord.gg/0ZcbPKXt5bYaNQ46.

[bodokaiser]

@taion This is a bug report.

[taion]

You are using the library incorrectly. Please follow the tutorial, consult the documentation, or reach out on a support channel.

[mdarif]

+1

[leecade]

+1 same problem

[ph3b]

@taion is correct. The problem is this: https://gist.github.com/bodokaiser/8482e0932fe242967c8f#file-app-index-js-L45:L47. The Link components are used outside the context of the router and will not be able to access your browserHistory object. The Link component needs to be used in a children component of the Router. You should be able to use Link from your Home, About, Contacts components since they are children components of the Router. If you need to handle route changes outside the scope of the router you can pass the browserHistory and call browserHistory.push(path). This is best described here: https://github.com/reactjs/react-router-tutorial/tree/master/lessons/12-navigating

[bodokaiser]

Yes this is the solution - however it is easy to forget or to not see the problem so it is good that this is now some sort of resource to this problem.