javascript - React Redux 用于 react 路由器导航的加载栏

Question

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

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

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

首先，我将 onTouchTap 函数附加到菜单项，但它只是不想正常工作。

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

Answer 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;