React router 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",它指向一个返回promise的函数.像这个:

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

执行此操作时,我收到以下错误:

路线(...):渲染没有返回任何内容.这通常意味着缺少return语句.或者,为了不渲染,返回null.

这当然会发生,因为在执行ajax时,路由没有返回任何内容.问题是:如何让React路由器4等待承诺解析？必须有某种方式.我记得AngaulrJS UI-Router实际上有一些"解决"api.

Answer 1

你需要另一种方法.

如果你的ajax完成了,你应该使用一个状态来存储.然后,为了渲染路径,如果未完成ajax,则可以不渲染任何内容(null或... loading),并使用ajax的结果渲染实际组件或任何您想要的内容.

我可以看到你正在基于一组数据生成路由,为了实现这一点,我将创建一个Component来包装数据加载条件.它可以作为道具接收:

• 决心(ajax功能)
• 要渲染的组件

在componentDidMount和componentDidUpdate上执行ajax调用并将其设置state.waitingResolve为true,并在.then()解析时将其设置state.waitingResolve为false,并将返回的数据也存储到状态.

在渲染上,您检查是否state.waitingResolve,并渲染null(或... loading)或渲染您从props收到的组件.

它可能看起来很复杂但值得.