Bedingt nicht getroffen werden - Bedingt Rendering Reagieren Komponente

Question

Ich bin mir nicht sicher, warum, egal ob isAuthenticated falsch ist oder nicht, endet es immer Rendern, anstatt zu schlagen. Wenn isAuthenticated falsch ist, würden Sie denken, dass es offensichtlich die Weiterleitung trifft, aber nicht.

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

Hier ist, was ich für RouteToRender in WebStorm sehen, wenn ich debuggen:

Was ich getan habe ist, nur eine Umleitung zu zwingen, und ich bemerkte, dass ich auch die {... diese entfernen. Requisiten} und der Staat: {ab: this.props.location} und das funktionierte:

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

So könnte es ein Problem mit der Tatsache, dass ich Requisiten bin vererben. Also hier ist es, was der Anruf so aussieht, diese Komponente verwendet:

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

So bin ich die Requisiten zu eingehenden ... (Komponente und Pfad) empfängt

THE FIX:

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

Tatsächlich repariert es es nicht vollständig, aber zumindest wird die Komponente nicht gerendert, wenn! IsAuthenticated. Aber jetzt hat meine letzte Änderung ein anderes Problem verursacht, wenn isAuthenticated wahr ist, wird es wahrscheinlich nicht gerendert, weil ich keinen Pfad mehr habe, seit ich {... this.props} daraus entfernt habe

Answer 1

Sie senden sowohl die Komponente als auch das Rendering als Requisiten zu Route Komponente. Da die Komponentenrequisite verfügbar ist, rendert die Route diese Komponente, anstatt das Rendern auszulösen.