用于反应路由器导航的 React Redux 加载栏答案

【问题标题】：React Redux Loading bar for react router navigation用于反应路由器导航的 React Redux 加载栏
【发布时间】：2016-10-10 11:09:41
【问题描述】：

所以我想实现一个加载栏，就像 github 一样。它应该在单击另一个页面时开始加载，并在到达时完成。

我正在使用 material-ui 和加载器 react-progress-bar-plus。

我尝试使用 react-router 的生命周期钩子，即 componentDidUpdate 和 componentWillReceiveProps 来设置完成状态。

首先，我在菜单项上附加了一个 onTouchTap 功能，但它就是不想正常工作。

实现此功能的最佳方式是什么？

【问题讨论】：

标签： javascript reactjs react-router material-ui

【解决方案1】：

您可以将router-resolver 与react-progress-bar-plus 一起使用。看这个例子： http://minhtranite.github.io/router-resolver/ex-4

用法示例：

// app.js
//...
import {RouterResolver} from 'router-resolver';
//...
const routes = {
  path: '/',
  component: App,
  indexRoute: {
    component: require('components/pages/PageHome')
  },
  childRoutes: [
    require('./routes/Example1Route'),
    require('./routes/Example2Route'),
    require('./routes/Example3Route')
  ]
};

const renderInitial = () => {
  return <div>Loading...</div>;
};

const onError = (error) => {
  console.log('Error: ', error);
};

ReactDOM.render(
  <Router routes={routes}
    history={history}
    render={props => (
      <RouterResolver {...props} renderInitial={renderInitial} onError={onError}/>
    )}/>,
  document.getElementById('app')
);

还有：

// components/pages/PageExample1.js
import React from 'react';
import Document from 'components/common/Document';

class PageExample1 extends React.Component {
  static resolve() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve('simple data');
      }, 2000);
    });
  };

  static propTypes = {
    response: React.PropTypes.string.isRequired
  };

  render() {
    return (
      <Document title='Example1 | Router resolver' className='page-ex-1'>
        <h1>Example 1: {this.props.response}</h1>
      </Document>
    );
  }
}

export default PageExample1;

【讨论】：

@Grego 你能接受吗？这将是我第一个接受的答案 :) 谢谢朋友
嗨，我看到这个github.com/mironov/react-redux-loading-bar 有更多的星星，两年后这仍然是最新的吗？
感谢@DimitriKopriwa 提及！您可以将其发布为答案，因为这样更公平，而不是我更新我认为的答案:) 但否则请让我知道，我会更新我的答案。
没关系，你可以把它放在你的答案中，这不会造成伤害

【解决方案2】：

我做了一个小包react-router-loading，它允许你在切换屏幕之前显示加载指示器并获取一些数据。

只需使用此包中的Switch 和Route 而不是react-router-dom：

import { Switch, Route } from "react-router-loading";

将loading 道具添加到您想要等待的路线：

<Route path="/my-component" component={MyComponent} loading/>

然后在MyComponent 中获取逻辑的末尾添加loadingContext.done();：

import { LoadingContext } from "react-router-loading";
const loadingContext = useContext(LoadingContext);

const loading = async () => {
    //fetching some data

    //call method to indicate that fetching is done and we are ready to switch
    loadingContext.done();
};

【讨论】：