条件が成立していない - 条件付きレンダリングリアクトコンポーネント

Question

なぜisAuthenticatedがfalseであるかどうかにかかわらず、どうしてなぜレンダリングが終了するのかわかりません。 isAuthenticatedがfalseの場合は、明らかにリダイレクトに当たると思われますが、そうではありません。私が何をしたか

だけのリダイレクトを強制することです、私は私も... {これを削除しなければならなかったことに気づいた：

class ProtectedRoute extends Component { 
    render() { 
    console.log(`ProtectedRoute: isAuthenticated: ${this.props.isAuthenticated}`) 
    const ComponentToRender = this.props.component, 
    RouteToRender = (
     <Route 
     {...this.props} 
     render={() => 
      (this.props.isAuthenticated ? (<ComponentToRender {...this.props} />) : 
      (<Redirect 
       to={{ 
       pathname: '/login', 
       state: {from: this.props.location 
       }}} 
      />))} 
     />) 

     return (RouteToRender) 
    } 
} 

は、ここで私はデバッグするとき、私はWebStormでRouteToRenderために見るものです。小道具}と状態：{から：this.props.location}と、これが働いた：

class ProtectedRoute extends Component { 
    render() { 
    console.log(`ProtectedRoute: isAuthenticated: ${this.props.isAuthenticated}`) 
    const ComponentToRender = this.props.component, 
    RouteToRender = (
     <Route 
     render={() => 
      (<Redirect 
      to={{ 
       pathname: '/login' 
       }} 
      />)} 
     />) 

     return (RouteToRender) 
    } 

だから、私は小道具を継承してるという事実と問題になる可能性があります。

<ProtectedRoute component={DashboardContainer} path='/dashboard' /> 

だから私も入ってくるそれらの小道具を受け付けております...（コンポーネントとパス）

FIX：

<Route 
      render={({this.props}) => 
      (this.props.isAuthenticated ? (<ComponentToRender {...this.props} />) : 
       (<Redirect 
       to={{ 
        pathname: '/login', 
        state: {from: this.props.location 
        }}} 
       />))} 
     />) 

だからここに、このコンポーネントを利用して通話がそのようになります

実際には完全には修正されませんが、少なくとも！isAuthenticatedならコンポーネントをレンダリングしません。しかし、今最後に変更された問題は、isAuthenticatedがtrueの場合、レンダリングされていない可能性があります。これは、{... this.props}を削除してからパスがなくなったためです。

Answer 1

コンポーネントとレンダリングRouteコンポーネントへの小道具として。コンポーネントの小道具が利用可能なので、ルートはレンダリングをトリガーする代わりにそのコンポーネントをレンダリングします。