小编Dav*_*d M的帖子

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

我是React的新手,在使用getComponent加载路径时,我无法弄清楚如何渲染"loading ..."屏幕.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;
Run Code Online (Sandbox Code Playgroud)

在尝试使用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 …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router react-redux

6
推荐指数
1
解决办法
5723
查看次数

标签 统计

javascript ×1

react-redux ×1

react-router ×1

reactjs ×1