When redirecting to a route under a container, the child components won't get rendered.

I have several session routes like /login and /forgotpassword. I wrap these routes in the SessionContainer. The rest of the routes I wrap in the MainAppContainer. My app looks like this:

  <Provider store={store}>
    <Router>
      <div className="App" >
        <ProgressBar />

        <MuiThemeProvider theme={theme}>
          <div>
            <div id="container">
              <Switch>
                <SessionContainer>
                  <Route exact path="/login" component={Login} />
                  <Route exact path="/forgotpassword" component={ForgotPassword} />
                </SessionContainer>

                <MainAppContainer>
                  <Route exact path="/" component={Home} />
                </MainAppContainer>
              </Switch>
            </div>
          </div>
        </MuiThemeProvider>
      </div>
    </Router>
  </Provider>

In the app container, I check whether the user is there in my redux state and redirect the user to the app if true. In the app container I reidrect to login if the user is not there. Example (My app container):

const MainAppContainer = ({ children, user }) => {
  if (user) {
    return (<div>
      <Sidebar />

      <MainContainer>
        <UserMenu />

        <InnerContainer>
          {children}
        </InnerContainer>
      </MainContainer>
    </div>);
  }
  return <Redirect to="/login" />;
};

The problem is, if I go to the app without logging in, the redirection happens as intended but, only the session container is loaded. The child components are not getting loaded. Any idea why this is happening?

[THPubs]

I just solved it! Everything works well until we add Redux. Redux prevents the container’s location from getting updated.

@jackjwilliams In your container, use the router’s location prop but when connecting redux, add withRouter first and then add the redux connect like this:

export default withRouter(connect(mapStateToProps)(Container));

Have a look at this stackoverflow question: https://stackoverflow.com/questions/45731078/when-redirecting-to-a-route-under-a-container-the-child-components-wont-get-re Make sure you read the comments.

[jjwilliams42]

Using withRouter did not work for me. Thank you for the guides though. I’ve even inlined my <Layout><Route/></Layout> directly in my ReactDOM.render to no avail. I may just get back to the basics without react-router-redux.