React路由器4：如何在Route的render方法中等待一个promise解决？

Question

我正在尝试实现功能，其中每个 Route 将首先等待一些 ajax 承诺解决，然后才会呈现路由。我看到onEnter已经不存在了，所以我正在尝试渲染方法。

我的路线是这样定义的：

{cmsRoutes.map((route, idx) => {
              console.log(route.resolve)
              return route.component ? (<Route  key={idx} path={route.path} exact={route.exact} name={route.name} render={props =>{
               route.resolve()
               .then(({data})=>{
                 console.log(data)
                  return (
                <route.component {...props} />
              )
                }) 

              } } />)
                : (null);
            },
            )}

如您所见，它只是遍历某个数组，该数组包含每个路由的数据。路由对象的字段之一是“resolve”，它指向一个函数，该函数返回一个承诺。喜欢这个：

const resolvemanageContactApplications = ()=> {
  return ajax('/contact')
};

执行此操作时，我收到以下错误：

Route(...): 渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

这当然会发生，因为在执行 ajax 时，路由没有返回任何内容。问题：我怎样才能让 React 路由器 4 等待承诺解决？必须有某种方式。我记得 AngaulrJS UI-Router 实际上有一些“解析” api。

Answer 1

您可以创建一些异步组件包装器，例如：

class AsyncComponent extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      Component: null
    };
  }

  componentDidMount() {
    const { componentPromise } = this.props;
    componentPromise.then(component => this.setState({
      Component: component
    }));
  }

  render() {
    const { Component } = this.state;

    if (!Component) {
      return null; // You can return some spinner here
    }

    return (
      <Component {...this.props} />
    );
  }
}

并在路由器内部使用它：

<Route
  key={idx}
  path={route.path}
  exact={route.exact}
  name={route.name}
  render={props => (
    <AsyncComponent componentPromise={route.resolve} {...props} />
  )}
/>

Answer 2

您需要另一种方法。

您应该使用状态来存储您的 ajax 是否已完成。然后，要渲染路由，如果 ajax 未完成，您可以不渲染任何内容（null 或 ...loading），并使用 ajax 的结果渲染实际组件或您想要的任何内容。

我可以看到您正在根据数据数组生成路由，为此我将创建一个组件来包装数据加载条件。 它可以作为道具接收：

• 解析（ajax 函数）
• 要渲染的组件

在componentDidMount和componentDidUpdate上进行ajax调用，将state.waitingResolve设置为true，在resolve的.then()上，将state.waitingResolve设置为false，并将返回的数据也存储到状态中。

在渲染时，您检查是否state.waitingResolve，并渲染 null（或 ...正在加载）或您从 props 收到的要渲染的组件。

它可能看起来很复杂，但它是值得的。