React Router 4 Async Rendering

Question

Ich befolge die Anleitung auf React Router 4 für Redirect (Auth) und ich habe Probleme beim Rendern Basis auf das Versprechen der Ajax zurück. Ich bin mir nicht sicher, warum mein Rendering innerhalb des Versprechens nicht zurückgegeben wird. Könnte mir jemand in die richtige Richtung zeigen?

import React from 'react'; 
import { 
    Route, 
    Redirect, 
    withRouter 
} from 'react-router-dom'; 
import HeaderContainer from '../containers/HeaderContainer'; 

const PrivateRoute = ({ component: Component, ...props }) => { 

    const validated = (rest) => { 
    props.fetchUser() 
    .then(() => { 
     return (
     <div> 
      <HeaderContainer /> 
      <Component {...rest}/> 
     </div> 
    ) 
    }) 
    .catch(()=> { 
     return (
     <Redirect to={{ 
      pathname: '/signin', 
      state: { from: props.location } 
     }}/> 
    ) 
    } 
    ); 
    } 

    return (
    <Route {...props} render={rest => { 
     return (
     <div> 
      { validated(rest) } 
     </div> 
    ) 
    }}/> 
) 
} 

export default withRouter(PrivateRoute); 

Meine Strecken wie folgt aussehen

const Root = ({ store }) => { 
    return (
    <Provider store={ store }> 
     <BrowserRouter onUpdate={() => window.scrollTo(0, 0)}> 
      <div className="root"> 
      <Switch> 
       <Route exact path="/signin" component={SignInContainer}/> 
       <PrivateRouteContainer exact path="/" component={HomePageContainer} /> 
      </Switch> 
      </div> 
     </BrowserRouter> 
    </Provider> 
) 
}; 

Answer 1

Das ist, weil Versprechen nicht Wert zurückgeben, es gibt nur Versprechen. Stattdessen führen sie Callbacks aus. Here is some explanation.

Sie könnten Ihren Code ein wenig wie diese neu anordnen:

class PrivateRoute extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
     isFetching: true, 
     isSuccess: null, 
    }; 
    } 

    componentDidMount() { 
    this.props.fetchUser() 
     .then(() => { 
     this.setState({ isFetching: false, isSuccess: true }); 
     }) 
     .catch(()=> { 
     this.setState({ isFetching: false, isSuccess: false }); 
     }); 
    } 

    render() { 
    const { isFetching, isSuccess } = this.state;  
    return (
     <Route {...this.props} render={rest => { 
     const success = (
      <div> 
      <HeaderContainer /> 
      <Component {...rest}/> 
      </div> 
     ); 

     const error = (
      <Redirect to={{ 
      pathname: '/signin', 
      state: { from: this.props.location } 
      }}/> 
     ); 

     if(isFetching) { 
      return null; 
     } 

     return isSuccess ? success : error; 
     }}/> 
    ) 
    } 
} 

Beachten Sie, dass Versprechen nichts zurückliefert es nur einen Rückruf ausführt, die rerender mit neuen Daten in Zustand auslöst.