Question

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

我使用material-ui和loader react-progress-bar-plus。

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

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

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

Answer 1

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

用法示例：

data

和

// 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')
);

Answer 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();
};

反应路由器导航的React Redux加载栏

2 个答案: