Javascript React路由器4异步呈现

我正在遵循React Router 4 for Redirect（Auth）的指南，在基于ajax返回的承诺进行渲染时遇到了问题。我不知道为什么我在承诺中的表现没有得到回报。有人能给我指一下正确的方向吗

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

从“React”导入React；
进口{
路线,，
重新使用
带路由器
}从“反应路由器dom”；
从“../containers/HeaderContainer”导入HeaderContainer；
const PrivateRoute=（{component:component，…props}）=>{
已验证常量=（剩余）=>{
props.fetchUser（）
.然后（（）=>{
返回(
)
})
.catch（（）=>{
返回(
)
}
);
}
返回(
{
返回(
{已验证（rest）}
)
}}/>
)
}
使用路由器导出默认值（PrivateRoute）；

我的路线是这样的

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

constroot=（{store}）=>{
返回(
window.scrollTo（0，0）}>
)
};
这是因为promise不能返回值，它只返回promise。相反，它执行回调

您可以将代码重新排列为如下所示：

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

类PrivateRoute扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
是的，
isSuccess:null，
};
}
componentDidMount（）{
this.props.fetchUser（）
.然后（（）=>{
this.setState（{isFetching:false，isSuccess:true}）；
})
.catch（（）=>{
this.setState（{isFetching:false，isSuccess:false}）；
});
}
render（）{
const{isFetching，issucess}=this.state；
返回(
{
常数成功=(
);
常量错误=(
);
如果（正在获取）{
返回null；
}
返回isSuccess？成功：错误；
}}/>
)
} 
}

请注意，Promise不会返回任何内容，它只是执行一个回调，用状态中的新数据触发rerender。
如何在服务器端呈现时不获取空组件？