Reactjs 当重定向到容器下的路由时，子组件赢了'；我不明白

我有几个会话路由，如

/login

和

/forgotpassword

。我将这些路由包装在

SessionContainer

中。我将剩下的路由包装在

MainAppContainer

中。我的应用程序如下所示：

  <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>

在应用程序容器中，我检查用户是否处于我的redux状态，如果为true，则将用户重定向到应用程序。在应用程序容器中，如果用户不在，我会请求登录。示例（我的应用程序容器）：

const MainAppContainer=（{children，user}）=>{
如果（用户）{
返回(
{儿童}
);
}
返回；
};

问题是，如果我在未登录的情况下转到应用程序，重定向会按预期进行，但只加载会话容器。未加载子组件。知道为什么会这样吗

我还尝试仅在路径匹配时重定向。不过，它不会加载子组件。如果我直接进入页面，它会加载所有内容。但如果重定向，子组件将不会渲染：

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

      <MainContainer>
        <UserMenu />

        <InnerContainer>
          {children}
        </InnerContainer>
      </MainContainer>
    </div>);
  }

  if (location.pathname !== '/login') {
    return <Redirect to="/login" />;
  }
  return null;
};

const mapStateToProps = (state) => {
  const { user } = state.session;

  return {
    user
  };
};

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

const MainAppContainer=（{children，user，location}）=>{
如果（用户）{
返回(
{儿童}
);
}
如果（location.pathname！='/login'）{
返回；
}
返回null；
};
常量mapStateToProps=（状态）=>{
const{user}=state.session；
返回{
用户
};
};
导出默认连接（MapStateTops）（带路由器（MainAppContainer））；

我试图在sandbox（）中重现这个问题，但在那里，有时会出现错误，但有时不会。我在这里添加了代码：

---

如果您可以克隆它，

纱线安装

和

纱线启动

，那么您将看到问题。转到

/login

。你应该看到两个标题。然后转到

/

。它将被重定向到

/login

，并且显示登录名的标题将不在那里。在编写代码时，我注意到只有在附加redux时才会发生这种情况

根据您的代码，存在无止境的重定向。无论路径是什么，都会执行此行：

  <MainAppContainer>
     <Route exact path="/" component={Home} />
  </MainAppContainer>

---

谢谢，我这样修改了容器，但仍然不起作用。当我直接加载页面时，就会加载内容。但是如果由于重定向而进入页面，则不会加载子项。请使用

console.log（location.pathname）

在

MainAppContainer

中检查

location.pathname

的内容，好吗？我怀疑您是否正确设置了路由器的

。它应该是
export default with router（connect（mapstatetops）（MainAppContainer））.Console日志提供了路径名，但存在问题。如果我访问
/
，它将打印
/
，并重新指向
/login
。我还有一个控制台登录。但如果重定向，它将不会被调用。如果我直接访问login，将调用该控制台日志，并获得路径名
/login
。您介意通过codesandbox或codepen共享完整的代码吗？如果你不介意的话，我想直接查一下。嗯，我明白了。请将这两行修改为：
exportdefaultwithrouter（connect（mapstatetops）（MainAppContainer））
（在
MainAppContainer
中），以及
使用路由器导出默认值（connect（mapstatetops）（SessionContainer））（在
会话容器中）。我在这里检查，它现在可以工作了。请试一试，并告诉我结果。如果它真的有效，我会修改我的答案并解释它。
  <MainAppContainer>
     <Route exact path="/" component={Home} />
  </MainAppContainer>

  if (user) {
    return (<div>
      <Sidebar />

      <MainContainer>
        <UserMenu />

        <InnerContainer>
          {children}
        </InnerContainer>
      </MainContainer>
    </div>);
  }

  else {
    // exclude the next line from being rendered on `/login`
    if (props.location.pathname !== '/login') {
      return <Redirect to="/login" />;
    }
    else {
      return null;
    }
  }

const MainAppContainer = ({ children, user, location }) => {
  console.log(`MainApp : ${location.pathname}`);

  // When the current path is '/login' or '/forgotpassword',
  // do not render anything.
  if ((location.pathname === '/login') || (location.pathname === '/forgotpassword')) {
    return null;
  }
  else {
    if (user) {
      const childrenWithProps = React.Children.map(children,
        child => React.cloneElement(child, {
          pathname: location.pathname
        })
      );



      return (
        <div>
          <h2>Session container.</h2>

          {childrenWithProps}
        </div>
      );
    }


    return <Redirect push to="/login" />;
  }

};