React Router Context Issue

I've been playing with React and using React Router to build a demo app.
The last couple of times I've sat down to work on it I've been struggling with what given hindsight seems like a very simple issue. 
The issue I was having was that after a user had logged in they would not be redirected to the page they wanted to view.  They would have been authenticated successfully but the redirect was throwing an exception because the router object in the context was undefined. 

The suggestions on how to fix this is to add this method to your React class.

 contextTypes{  
   router: React.PropTypes.object.isRequired  
 }   

This will check that there is a router object available in the context and make it available through

 this.context.router

If router is not available within the context object it will raise a warning in the console.

Failed Context Types: Required context `router` was not specified in ...   

This is what I was getting.   Lots of searching brought me to this issue on the Redux project that pointed out that in 1.0 the router context was changed to be location and history objects in the context. 

I went to bed and slept on this issue.  when I woke in the morning I though to check the versions of React Router that I was using vs the version in the example app (from react-router code base) that I was working from.

It turns out the issue was because my code was targeting 1.0.3 which as of 08:00 2016-01-12 Newcastle N.S.W. time is the version that is installed when running

npm install --save react-router 

I changed this to "2.0.0-rc4" in my package.json file re ran npm install and now it's all working.

The moral of this story is that with the wild and fast evolving world of web frameworks, even if you've gotten the latest from npm you don't necessarily have the latest as far as the project is concerned.

Comments

  1. I appreciate this blog to share knowledge about this important topic. Here I found different segments and now I am going to use these new tips with new enthusiasm.
    Cisco RV130

    ReplyDelete
  2. Extremely intriguing online journal. A lot of web journals I see nowadays don't generally give anything that I'm keen on, however I'm most definitely inspired by this one. Recently felt that I would post and let you know. Specifications

    ReplyDelete

Post a Comment

Popular posts from this blog

Solving `Empty reply from server` in DotNet Core

Building a verify JWT function in TypeScript

Can't resolve DNS Aws