React-router: The context router undefined

[nikitatrifan]

Hey guys, I need your help!

Everything was good until the moment when I decided to remove node_modules folder and redownload it by npm install.

So, now I got the error in every component where I used context router, for example CatalogFilterContainer ->:

Warning: Failed context type: The context `router` is marked as required in `CatalogFilterContainer`, but its value is `undefined`.
    in CatalogFilterContainer (created by Connect(CatalogFilterContainer))
    in Connect(CatalogFilterContainer) (created by CatalogPage)
    in div (created by Container)
    in Container (created by CatalogPage)
    in CatalogPage (created by Connect(CatalogPage))
    in Connect(CatalogPage) (created by Route)
    in Route (created by render)
    in Switch (created by render)
    in render (created by Route)
    in Route (created by RouteNotify)
    in RouteNotify (created by Connect(RouteNotify))
    in Connect(RouteNotify) (created by App)
    in Switch (created by PagesTransitions)
    in div (created by PagesTransitions)
    in PagesTransitions (created by Connect(PagesTransitions))
    in Connect(PagesTransitions) (created by App)
    in div (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App (created by Connect(App))
    in Connect(App)
    in Provider
    in AppContainer

In CatalogFilterContainer ->

export default class CatalogFilterContainer extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  };

Project is here - https://github.com/expdevelop/ultrastore
First of all install dependencies by npm install and run npm run dev. Then go to (for example) localhost:5000/catalog/phones.

Router version ->

"react-router-dom": "^4.0.0-beta.7"

[nikitatrifan]

Are you just changed context.router to context.history?

[nikitatrifan]

Was trying to downgrade to 4.0.0-beta.6 and got this ->

Warning: Failed context type: The context `router` is marked as required in `Link`, but its value is `undefined`.
    in Link (created by Route)
    in Route (created by NavLink)
    in NavLink (created by Text)
    in Text (created by Link)
    in Link (created by NavLinks)
    in div (created by FlexGrid)
    in FlexGrid (created by NavLinks)
    in NavLinks (created by NavDesktop)
    in div (created by FlexGrid)
    in FlexGrid (created by NavDesktop)
    in div (created by Container)
    in Container (created by NavDesktop)
    in nav (created by NavDesktop)
    in NavDesktop (created by NavContainer)
    in NavContainer (created by Connect(NavContainer))
    in Connect(NavContainer) (created by Route)
    in Route (created by App)
    in div (created by App)
    in Router (created by BrowserRouter)
    in BrowserRouter (created by App)
    in App (created by Connect(App))
    in Connect(App)
    in Provider
    in AppContainer

[seanchas]

@expdevelop That's because react-router still at 4.0.0-beta.7, after you downgrade.

[nikitatrifan]

Solved!

Delete node_modules folder and add this to your package.json ->

"react-router": "4.0.0-beta.6",
"react-router-dom": "4.0.0-beta.6",

then npm install

[florimm]

I have same issue when i run test and use enzyme (mount) also with =>

"react-router": "4.0.0-beta.6",
"react-router-dom": "4.0.0-beta.6",

[vyushenko]

@florimm

Yes, this is because "react-router-dom"'s package.json has a dependency for "react-router": "^4.0.0-beta.6" for which it pulls in "4.0.0-beta.7" version.

What you need to do is this:
1.) do "npm install"
2.) then delete "node_modules/react-router-dom/node_modules/react_router" folder. This will delete "4.0.0-beta.7" version of "react-router". You will still have "4.0.0-beta.6" version of "react-router-dom" in "node_modules/react-router"

After that it should work (fixed for me).

[natashache]

Tried the steps of @vyushenko. Still get the same error "Failed context type: The context router is marked as required in Link, but its value is undefined" :(

[JimiHFord]

@natashache see @mjackson's comment in #4759

[ha404]

I get this error when trying to map Link, is this related?

map(([key, idea]) => (
  <Link
    key={key}
    to={`/idea/${key}`}
  >
    <Idea
      votes={idea.votes}
      title={idea.title}
    />
  </Link>
))

I'm using "react-router-dom": "^4.1.1",

EDIT: Answered my own question. I was testing without a <Router> to wrap my component. https://reacttraining.com/react-router/web/guides/testing

[ali-master]

Your class also needs @expdevelop

  contextTypes: {
    router: PropTypes.object
  },

Before use it, you should be install prop-types package for use this in React v15.5.x,

[scifutures]

This can happen if you do not wrap

[bkou]

Spent all day trying to figure this out for project 1 of Udacity's React nanodegree. BrowserRouter was the answer. Forgot it needed to be included in index.js. Thanks @scifutures

Phrases for searchability:
TypeError: _ref2 is undefined
function computeMatch(_ref, _ref2)
var route = _ref2.route
TypeError: this.context.router is undefined
_this.context.router
Warning: Failed context type: The context router is marked as required in Link, but its value is undefined
MyReads: A Book Tracking App
React Fundamentals