React.js 在页面/网址更改时加载动画答案

【问题标题】：React.js Loading animation on page/url changeReact.js 在页面/网址更改时加载动画
【发布时间】：2019-11-15 17:25:54
【问题描述】：

我是 React 新手，我正在尝试在页面/网址更改（按钮单击）时显示加载动画 - https://codesandbox.io/s/cthululel-7zmsl?fontsize=14

我已经设法让动画在初始加载时工作，但我现在遇到的问题是加载动画在我单击按钮时显示，但它也会立即显示页面内容（每个页面都是只有一个用于测试的 h1 标签）并且加载动画没有完成。我已经清理了沙盒，以显示我可以访问的唯一“工作”版本。

【问题讨论】：

加载器应该在“页面”级别，所以每个页面应该自己决定何时显示加载器以及何时显示其他任何内容（页面内容）

标签： javascript reactjs frontend

【解决方案1】：

移除你提供路由的加载组件试试这个

Home.js

//Apply in each js file
import React from 'react'
import Loading from "../../components/loading/loading";

export default class Home extends React.Component
{
    constructor(props) {
        super(props);
        this.state = {
          loaded: false,
          done:false
        };
      }
   componentDidMount() {
        setTimeout(() => {
          this.setState({loaded:true})
        }, 1500);
      }
      }
    render()
    {
        return(
            <div>Home {this.state.loaded ? "" : <Loading />}</div>
        )
    }
}

【讨论】：