score:2

Accepted answer

Looks like this is a bug: https://github.com/ReactTraining/react-router/issues/6072, and possibly even a React bug: https://github.com/facebook/react/issues/12551.

For now, you can get around it by rendering Router and your context provider in separate components. Like this, for example:

const Routes = () => (
  <UserContext.Provider value={false}>
      <div>
          <ProtectedRoute path='/protected' component={Protected}/>
          <Route path='/login' component={Login}/>
      </div>
  </UserContext.Provider>
);

export default class App extends Component {
    render() {
        return (
            <Router>
              <Routes/>
            </Router>
        );
    }
}

Related Query

More Query from same tag