在react-router中调用getComponent时如何显示加载UI？

我对 React 很陌生，我不知道如何在使用 getComponent 加载路由时呈现“正在加载...”屏幕。 getComponent 调用工作正常并显示组件，但 UI 上没有任何迹象表明请求和响应之间发生了任何情况。这就是我想弄清楚的。

import Main from './pages/Main.jsx';
import Test from './pages/Test.jsx';
import Home from './pages/Home.jsx';


var Routes = {
  path: "/",
  component: Main,
  indexRoute: {
    component: Home
  },
  childRoutes: [
    {
      path: "test",
      component: Test
    },
    {
      path: "about",
      getComponent: function(path, cb) {
        require.ensure([], (require) => {
          cb(null, require("./pages/about/About.jsx"));
        });
      }
    }
  ]
};

export default Routes;

在尝试使用 onEnter 或在 getComponent 函数中强制显示“正在加载”组件失败后，我想也许我应该尝试使用 Redux 将加载状态设置为 true/false 并让我的主视图组件显示加载屏幕：

import React from 'react';
import {connect} from 'react-redux';

import NavBar from '../components/Navigation/NavBar.jsx';
import Footer from '../components/Footer.jsx';
import Loading from './Loading.jsx';
import navItems from '../config/navItems.jsx';
import setLoading from '../actions/Loading.jsx';

var Main = React.createClass({
  renderPage: function() {
    if (this.props.loading) {
      return (
        <Loading/>
      );
    } else {
      return this.props.children;
    }
  },
  render: function() {
    return (
      <div>
        <header id="main-header">
          <NavBar navigation={navItems}/>
        </header>
        <section id="main-section">
          {this.renderPage()}
        </section>
        <Footer id="main-footer" />
      </div>
    );
  }
});

function mapStateToProps(state) {
  return {
    loading: state.loading
  }
}

export default connect(mapStateToProps)(Main);

如果我使用操作手动设置加载状态，这似乎有效，这正是我想要做的。但是（我觉得这将是一个真正的菜鸟问题）我无法弄清楚如何从路由器内访问商店/调度程序。

我不确定我是否使用了错误的搜索词或其他什么，但我完全没有想法，每个react-router/redux教程似乎都跳过了我认为必须是一个常见问题的问题。

谁能指出我正确的方向（并让我知道我所做的是否是最佳实践？）？

EDIT: 我会尝试进一步澄清这一点。在第一个代码块中，您可以看到如果我单击<Link to="/about">元素，然后 getComponent 函数将触发，这将延迟加载 About.jsx 组件。我遇到的问题是我无法弄清楚如何显示某种加载指示器/旋转器，这些指示器/旋转器在单击链接后立即出现，然后在组件加载后将其替换。

更多编辑：我尝试创建一个包装器组件来加载异步路由，它似乎可以工作，但是感觉真的很老套，我确信这不是执行此操作的正确方法。路由代码现在看起来像这样：

import Main from './pages/Main.jsx';
import Test from './pages/Test.jsx';
import Home from './pages/Home.jsx';
import AsyncRoute from './pages/AsyncRoute.jsx';


var Routes = {
  path: "/",
  component: Main,
  indexRoute: {
    component: Home
  },
  childRoutes: [
    {
      path: "test",
      component: Test
    },
    {
      path: "about",
      component: AsyncRoute("about")
    }
  ]
};

export default Routes;

AsyncRoute.jsx 页面如下所示：

import React from 'react';

function getRoute(route, component) {
  switch(route) {
    // add each route in here
    case "about":
      require.ensure([], (require) => {
        component.Page = require("./about/About.jsx");
        component.setState({loading: false});
      });
    break;
  }
}

var AsyncRoute = function(route) {
  return React.createClass({
    getInitialState: function() {
      return {
        loading: true
      }
    },
    componentWillMount: function() {
      getRoute(route, this);
    },
    render: function() {
      if (this.state.loading) {
        return (
          <div>Loading...</div>
        );
      } else {
        return (
          <this.Page/>
        );
      }
    }
  });
};

export default AsyncRoute;

如果有人有更好的主意，请告诉我。

我想我已经弄清楚了。这可能是也可能不是正确的处理方式，但它似乎有效。我也不知道为什么我没有早点想到这一点。

首先，将我的 createStore 代码移至其自己的文件 (store.jsx)，以便我可以将其导入到主入口点以及我的 Routes.jsx 文件中：

import {createStore} from 'redux';
import rootReducer from '../reducers/Root.jsx';

var store = createStore(rootReducer);

export default store;

Root.jsx 看起来像这样（这是一个丑陋的混乱，但我只是想得到一些在基本层面上工作的东西，然后我会清理它）：

import {combineReducers} from 'redux';
import user from './User.jsx';
import test from './Test.jsx';

var loading = function(state = false, action) {
  switch (action.type) {
    case "load":
      return true;
    case "stop":
      return false;
    default:
      return state;
  }
};


export default combineReducers({
  user,
  test,
  loading
});

我制作了一个基本组件，根据 Redux 存储的“正在加载”值显示正在加载/已加载：

import React from 'react';
import {connect} from 'react-redux';

var Loading = React.createClass({
  render: function() {
    if (this.props.loading) {
      return (
        <h1>Loading</h1>
      );
    } else {
      return (
        <h1>Loaded</h1>
      );
    }
  }
});

export default connect(state => state)(Loading);

现在我的 Routes.jsx 文件如下所示（注意我已经导入了 Redux 存储）：

import Main from './pages/Main.jsx';
import Test from './pages/Test.jsx';
import Home from './pages/Home.jsx';
import store from './config/store.jsx';

var Routes = {
  path: "/",
  component: Main,
  indexRoute: {
    component: Home
  },
  childRoutes: [
    {
      path: "test",
      component: Test
    },
    {
      path: "about",
      getComponent: function(path, cb) {
        store.dispatch({type: "load"})
        require.ensure([], (require) => {
          store.dispatch({type: "stop"});
          cb(null, require("./pages/about/About.jsx"));
        });
      }
    }
  ]
};

export default Routes;

这似乎有效。一旦<Link/>单击以转到 /about 路线，将调度一个操作以将主商店中的“正在加载”状态设置为 true。这导致<Loading/>组件来更新自身（我想象它最终会在窗口的角落呈现一个旋转器或类似的东西）。那个奇怪的require.ensure([])运行函数来让 webpack 进行其奇特的代码分割，一旦组件被加载，就会调度另一个操作来将加载状态设置为 false，并渲染组件。

我对 React 还很陌生，虽然这似乎有效，但我不确定这是否是正确的方法。如果谁有更好的方法，欢迎留言！