title: Display a simple loading indicator between routes in react router
body: <p>I'm coming from <em>AngularJS</em> world and start some days ago writing my first React App with <code>react-router</code>, in <em>AngularJS</em> I do:</p>
  
  <pre><code>app.directive('Loading', function($rootScope, $timeout) {
      return {
          restrict: 'E',
          replace: true,
          template: '&lt;p&gt;Loading&lt;/p&gt;'
          link: function(scope, element) {
              $rootScope.$on('$routeChangeStart', function(event, currentRoute, previousRoute) {
                  element.removeClass('ng-hide');
              });
  
              $rootScope.$on('$routeChangeSuccess', function() {
                  element.addClass('ng-hide');
              });
          }
      };
  });
  </code></pre>
  
  <p>and then I just add <code>&lt;Loading&gt;&lt;/Loading&gt;</code>. So now in my React App I have:</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
         &lt;Router&gt;
          &lt;div&gt;
            &lt;ul&gt;
              &lt;li&gt;&lt;Link to="/"&gt;Home&lt;/Link&gt;&lt;/li&gt;
              &lt;li&gt;&lt;Link to="/about"&gt;About&lt;/Link&gt;&lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;hr/&gt;
  
            &lt;Route exact path="/" component={Home}/&gt;
            &lt;Route path="/about" component={About}/&gt;
  
          &lt;/div&gt;
        &lt;/Router&gt;
  
  
      );
    }
  }
  </code></pre>
  
  <p>and my two components are simple:</p>
  
  <pre><code>class Home extends Component {
      render() {
          return (
              &lt;h1&gt;Home&lt;/h1&gt;
          );
      }
  }
  class About extends Component {
      render() {
          return (
              &lt;h1&gt;About&lt;/h1&gt;
          );
      }
  }
  </code></pre>
  
  <p>Can I do this without using <a href="https://redux.js.org" rel="nofollow noreferrer">reduxJS</a>?</p>