React-router: Nothing renders if render() changes routes

[justinpincar]

For some reason, my routes only render half the time - seems like a race condition of some sort. It'll print out the "OK" but nothing from the routes, not even the 404. Pretty clear cut.

If I remove the loading bit it'll always render the switch block as intended.

Is there a better / different way to do this?

v 4.2.0

  render() {
    const { hasInitialized } = this.props;
    if (!hasInitialized) {
      return (
        <div>Loading...</div>
      );
    }

    return (
      <div style={{ height: '100%', width: '100%' }}>
        <Helmet titleTemplate="%s - Resilient" defaultTitle="Resilient" />
        <div>OK</div>
        <Switch>
          <Redirect from="/" to="/auth/check" exact={true} />
          <Route path="/auth" component={AuthLayout} />

          <AuthenticatedRoute path="/x" component={AdminLayout} />
          <Route component={Miss404} />
        </Switch>
      </div>
    );
  }

[timdorr]

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out. Thanks!

[justinpincar]

The code snippet I posted demonstrates a clear bug - react-router does not render when it should.

[Stas-Buzunko]

@justinpincar try wrapping with withRouter

[justinpincar]

Thanks @Stas-Buzunko, I posted on SO here with a workaround - https://stackoverflow.com/questions/46772990/react-router-does-not-render-anything-if-routes-are-changed-in-render