在 react-router-dom v5 中使用 BrowserRouter 未定义路由器上下文

Question

Have an issue where the following code successfully logs the context when using react-router-dom 4.0.0 , but logs undefined when using 5.0.1 .

const { BrowserRouter, Route, Switch } = window.ReactRouterDOM;

const PropTypes = window.PropTypes;

class Main extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }

  render() {
    console.log("this.context.router");
    console.log(this.context);
    console.log(this.context.router);

    return <div>Main</div>;
  }
}

const App = () => (
  <BrowserRouter>
    <div>
      <Switch>
        <Route path="/" component={Main} />
      </Switch>
    </div>
  </BrowserRouter>
);

ReactDOM.render(<App />, document.getElementById('app'));

using: 4.0.0 (works): https://jsfiddle.net/2shm7awn/3/

using: 5.0.1 (doesn't work): https://jsfiddle.net/2shm7awn/2/

using 5.0.1 and every other package up to date ( react / react-dom @ 16.9.0 - also doesn't work):

https://jsfiddle.net/2shm7awn/5/

I've done a fair amount of searching, and even if I missed something obvious in the docs, I think this could help some in the future.

Is there something new with version 5 that I'm missing?

Answer 1

I suppose the reason is that React Router 5 uses the new context API, which is different from the old one. You can find some information here: react router v5 and some points how to access it accessing context api

But why do you need to access the context this way? Probably the problem can be solved in another way.

Answer 2

Came across this when I had a inexplicable failure after upgrading from v4 to v5. So to add to @sergii-vorobei's answer for anyone it might help.

My issue was because one of the package dependencies from generating the routes was bundling react-router in its distributable. Since react-router depends on the singleton for supplying the correct context, the singleton for the main app router and routes did not match leading to the routes never receiving the context from the main app.