Question

我正在使用react-router v1.0.0-rc4。

这是我的路线：

  <Router>
    <Route path="/" component={App}>
      <Route path="info" component={Info} />
      <Route path="dashboard" onEnter={callAjax} component={Dashboard} />
    </Route>
  </Router>

当url更改为/ dashboard时，将调用onEnter，ajax请求将发送到服务器并且响应时间约为1秒。

所以在这1秒内，UI没有任何回应。我想问的是我能做些什么呢？

我要做的是在仪表板组件中，我检查数据是否存在。如果不存在，我将显示旋转，否则我将显示数据。但问题是在ajax完成之前，仪表板将不会安装。

所以请提出一些建议，谢谢。

Answer 1

如有必要，您可以拨打应用程序组件上的history.listenBefore以收听历史记录的即时更新，并做一些工作以响应此操作以设置转换状态。

但是，我们的官方建议是不要使用onEnter进行数据获取，除非服务器端渲染等内容迫使您这样做;一般情况下，出于上述情况的原因，您最好将数据提取视为组件渲染的一部分（可能通过Flux实现），然后在路径组件中渲染加载指示器等待它的数据。

Answer 2

是的，因为一旦数据存储在您的变量中，您就必须明确地清除这些数据，否则在您第一次获得旋转后会发生什么事情，之后您将无法看到旋转。

因此，当您调用API时，您必须清除旧数据数据

resetData:function()
{
_data={};
}

你必须在调用API之前调用此方法

异步onEnter的UI响应 - react-router

2 个答案: