Reactを使用すると、ルートを変更するときにブラウザタブでブラウザの読み込みインジケータをトリガする方法はありますか？

Question

Facebookなどのウェブサイトでページを変更すると、ブラウザの読み込みインジケータがトリガされることがありますが、ときどきフルページのリロードが行われないことがあります。どのようにReactを使用して同様の動作を達成するには？

Answer 1

反応ルータを使用している場合は、クライアント側でルート変更を処理できます。ルートが変更されている間、ロードインジケータを表示するためにHOCを作成できます。

import React from 'react'; 
import Loader from './Loader'; 

function withRouteLoader(WrappedComponent) { 
    class AppWithRouteLoader extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     isLoading: false, 
     loadedRoutes: props.location && [props.location.pathname], 
     }; 
     this.updateIsLoading = this.updateIsLoading.bind(this); 
    } 

    componentWillMount() { 
     this.unsubscribeHistory = this.props.router && this.props.router.listenBefore((location) => { 
     if (this.state.loadedRoutes.indexOf(location.pathname) === -1) { 
      this.updateIsLoading(true); 
     } 
     }); 
    } 

    componentWillUpdate(newProps, newState) { 
     const { loadedRoutes } = this.state; 
     const { pathname } = newProps.location; 

     if (loadedRoutes.indexOf(pathname) === -1 && newState.isLoading === true) { 
     this.updateIsLoading(false); 
     this.setState({ 
      loadedRoutes: loadedRoutes.concat([pathname]), 
     }); 
     } 
    } 

    componentWillUnmount() { 
     this.unsubscribeHistory = undefined; 
    } 

    updateIsLoading(isLoading) { 
     this.setState({ isLoading }); 
    } 

    render() { 
     return (
     <div> 
      <Loader show={this.state.isLoading} /> 
      <WrappedComponent {...this.props} /> 
     </div> 
    ); 
    } 
    } 

    AppWithRouteLoader.propTypes = { 
    location: React.PropTypes.object, 
    router: React.PropTypes.object, 
    }; 

    return AppWithRouteLoader; 
} 

export default withRouteLoader; 

このBoilterplate https://github.com/react-boilerplate/react-boilerplateを参照してください。それはすべてが実装されている