コンテナのルートにリダイレクトすると、子コンポーネントはレンダリングされません。

Question

/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 }) => { 
    if (user) { 
    return (<div> 
     <Sidebar /> 

     <MainContainer> 
     <UserMenu /> 

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

問題があり、意図したとおりにリダイレクトが発生したものの、セッションのみコンテナがロードされます。子コンポーネントはロードされません。なぜこれが起こっているのか？

また、パスが一致する場合にのみリダイレクトを試みました。それでも、子コンポーネントはロードされません。私がページに直接行くと、すべてがロードされます。リダイレクト場合でも、子コンポーネントは表示されません：私はサンドボックス（https://codesandbox.io/s/github/THPubs/react-router-multiple-containers）で問題を再現しようとしましたが、そこに時々エラーが来るが、時にはそれはないでしょう

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

。ここにコードを追加しました：https://github.com/THPubs/react-router-multiple-containers。

クローンできる場合は、yarn installとyarn startと表示されます。 /loginにアクセスしてください。 2つのタイトルが表示されます。次に/に移動します。それは/loginにリダイレクトされ、ログインと言うタイトルはそこにはありません。コードを準備するとき、私はreduxを付けるときだけ起こることに気づいた！

Answer 1

コードに基づいて無限のリダイレクトがあります。この行は、パスが何であっても実行されます。

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

ここでは、最初にロギングせずに「/」に行くとします。これはどうなりますか：

1. MainAppContainerがレンダリングされます。あなたはログインしていないので、<Redirect to="/login" />がレンダリングされます。
2. メインアプリケーションに戻ると、MainAppContainerが再びレンダリングされます。
3. ログインしていないので、<Redirect to="/login" />がレンダリングされます。これは無限のリダイレクトです。

ソリューション： リダイレクトするかどうかを決定する前に、現在のパス名を確認してください。

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

はまた、あなたは、このソリューションの作品を作るためにMainAppContainerとwithRouter()を呼び出す必要があります。 、 はforgotpassword問題を解決するためにMainAppContainerを変更します：MainAppContainerのでprops.location

最終解決へのアクセス権を持っていない

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" />; 
    } 

};