javascript - React Router 4 异步渲染

Question

我正在遵循 React Router 4 的重定向(Auth)指南，但我在基于 ajax 返回的 promise 进行渲染时遇到问题。我不确定为什么我在 promise 中的渲染没有被返回。有人能指出我正确的方向吗？

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

我的路线是这样的

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

那是因为promise不能返回值，它只返回Promise。相反，它执行回调。 Here is some explanation.

您可以重新排列代码，如下所示:

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

请注意，Promise 不会返回任何内容，它只是执行一个回调，该回调会触发状态中的新数据的重新渲染。