在反应路由器中的路由之间显示一个简单的加载指示器

Posted 2023-02-21

【中文标题】在反应路由器中的路由之间显示一个简单的加载指示器

【英文标题】：Display a simple loading indicator between routes in react router

【发布时间】：2018-04-16 16:24:29

【问题描述】：

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

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 应用程序中我有：

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 来执行此操作吗？

【问题讨论】：

也许这对你有帮助：***.com/questions/45373742/…

【参考方案1】：

如果您获取一些数据，我制作了一个小包react-router-loading，它允许您显示加载指示器并在切换屏幕之前加载一些数据。

只需使用此包中的Switch 和Route 而不是react-router-dom：

import  Switch, Route  from "react-router-loading";

将loading 道具添加到您想要等待的路线：

<Route path="/about" component=About loading/>

然后在 About 组件中获取逻辑的末尾某处添加 loadingContext.done();：

import  LoadingContext  from "react-router-loading";
const loadingContext = useContext(LoadingContext);

const loading = async () => 
    //loading some data

    //call method to indicate that loading is done and we are ready to switch
    loadingContext.done();
;

【讨论】：

我看了一下这个包，我很想在我的项目中使用它。一个问题，是否可以改变顶栏的位置？现在它在屏幕的顶层，但我想把它放在我的标题组件的底部。我不确定这是否可以通过topbar.config() 实现。你能告诉我我能做什么吗？

@user12051965 我在我的包中使用了 topbar (buunguyen.github.io/topbar)，但似乎无法通过配置来实现它。相反，您可以使用 css 来完成。只需将 .topbar top: unset !important; bottom: -12px; 之类的内容添加到您的 CSS 中，并在必要时调整底部值。

【参考方案2】：

您可以在响应中使用高阶组件以通用方式执行此操作。

看是一个例子：

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