我真的是 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 教程似乎都跳过了我认为必须是一个常见问题的问题.

谁能给我指出正确的方向(并让我知道我正在做的是否是最佳实践？)？

编辑:我会尝试进一步澄清这一点。在第一个代码块中，您可以看到如果我单击 <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 商店的“loading”值显示 Loading/Loaded:

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/>组件进行 self 更新(我设想它最终会在窗口的一 Angular 呈现一个微调器或类似的东西)。那个奇怪的require.ensure([])运行函数让 webpack 进行其花哨的代码拆分，一旦加载了组件，就会调度另一个操作以将加载状态设置为 false，然后呈现组件。

我对 React 还是很陌生，虽然这似乎可行，但我不确定这是否是正确的方法。如果有人有更好的方法，请补充!

关于javascript - 在 react-router 中调用 getComponent 时如何显示正在加载的 UI？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36349890/