Question

在呈现页面之前，我有一组要调用的AJAX请求。我使用的是react-router 2.4.1。在我以前的一个项目中，使用了旧版本的react-router，这就是我以前用来处理这个问题的方法

Router.run(RouteConfig, function(Handler, state){
    var promises = state.routes.filter(function(route) {
        //Every component that needs initial data for rendering will 
        //define a function fetchData in its statics which will return
        //a promise that will be resolved once all required AJAX calls             
        //are made.
        return route.handler.fetchData;
    }).map(function(route) {
        return route.handler.fetchData(state.params, state.query);
    });
    if(promises.length > 0) {
        Promise.all(promises).then(function(response) {
            data = response;
            //Rendering will happen only after every call is resolved
            render(Handler, data);
        }).catch(function(response, err) {
            data = response;
            data.isError = true;
            data.splice(err.index, 1, err.reason);
            render(Handler, data);
        });
    } else {
        render(Handler, data);
    }
});

function render(Handler, data) {
    React.render(<Handler data={data}/>, document.body);
}

在新版本中，我看不到Router.run。我怎样才能在2.4.1中实现相同的目标？

Answer 1

您可以尝试使用路由器提供的onEnter挂钩。我将使用React Router显示我当前的设置。请记住，我声明了路由的依赖关系，而不是组件，但您可以更改该行为以满足您的需求。

以此路线列表为例：

<Route path="/" onEnter={fetchDependencies} component={AppContainer}>
  <IndexRedirect to="/home" />
  <Route path="/home" component={StaticContainer} require={loadStaticPage} />
  <Route path="/contact" component={StaticContainer} require={loadStaticPage} />
</Route>

我将自己的处理程序添加到顶级路由器以获取每个依赖项，因为您只需要在属性onEnter上设置一个函数。我在需要一些依赖关系的路由上也有一个自定义属性，我命名为prop require，它只是一个返回promise的函数。在你的情况下使用组件。

此onEnter采用具有以下签名的函数：

onEnter(nextState, replace, callback?)

回调是可选的，如果提供，路由器将不会呈现组件，直到调用回调没有任何错误。这就是你假装的行为。

这是我获取依赖项的方法，您可以调整此代码以满足您的需求

function fetchDependencies(toRoute, redirect, done) {
  const { routes, params, location } = toRoute;
  const payload = Object.assign({}, location, { params });
  const promises = routes
    .map( ({ require }) => require )
    .filter( f => typeof f === 'function' )
    .map( f => f(payload) );

  return Promise.all(promises).then( () => done() , done);
}

在您的情况下，您可以使用组件而不是require属性。只需更改地图功能即可返回。所以这一行

.map( ({ require }) => require )

会改为

.map( ({ component }) => component.fetchData )

这只是一个想法，我粘贴的代码只是我使用的设置的简化版本。我当前的设置与Redux绑定，我试图在这些示例中删除有关redux的所有引用，这就是为什么它可能没有完美意义。我也使用同构渲染，所以我的处理程序有点复杂，我不需要在客户端上进行回调，因为redux将在获取依赖关系后立即处理重新渲染。

但是你得到了基本的想法。你需要玩onEnter钩子。在那里，您可以获取所有依赖项并在完成后调用回调函数。它就像你的旧设置，但组织方式略有不同。

如何在状态转换之前暂停组件的延迟？

1 个答案: