在反应路由器中显示路由之间的简单加载指示符 [英] Display a simple loading indicator between routes in react router

问题描述

我来自 AngularJS 世界，几天前开始在 AngularJS中用 react-router 编写我的第一个React App 我这样做：

I'm coming from AngularJS world and start some days ago writing my first React App with react-router, in AngularJS I do:

app.directive('Loading', function($rootScope, $timeout) {
    return {
        restrict: 'E',
        replace: true,
        template: '<p>Loading</p>'
        link: function(scope, element) {
            $rootScope.$on('$routeChangeStart', function(event, currentRoute, previousRoute) {
                element.removeClass('ng-hide');
            });

            $rootScope.$on('$routeChangeSuccess', function() {
                element.addClass('ng-hide');
            });
        }
    };
});

然后我只需添加< Loading>< / Loading> 。所以现在在我的React App中我有：

and then I just add <Loading></Loading>. So now in my React App I have:

class App extends Component {
  render() {
    return (
       <Router>
        <div>
          <ul>
            <li><Link to="/">Home</Link></li>
            <li><Link to="/about">About</Link></li>
          </ul>

          <hr/>

          <Route exact path="/" component={Home}/>
          <Route path="/about" component={About}/>

        </div>
      </Router>


    );
  }
}

我的两个组件很简单：

class Home extends Component {
    render() {
        return (
            <h1>Home</h1>
        );
    }
}
class About extends Component {
    render() {
        return (
            <h1>About</h1>
        );
    }
}

我是否可以在不使用 reduxJS ？

推荐答案

你可以使用高阶组件做出反应以通用方式执行此操作。

you can use a High Order Component in react to do this in a generic way.

看一个例子：

https://github.com/thejameskyle/react-loadable

这篇关于在反应路由器中显示路由之间的简单加载指示符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！