在预加载器页面呈现之前立即显示网站主页

Question

我用 React 创建了一个网站。最近我为我的网站实现了一个预加载器页面。但问题是在预加载器页面呈现之前立即显示网站主页。我如何解决这个问题？下面显示加载器组件和 app.js 文件。我正在为 Loader 组件使用 Lottie 包。

加载器组件

import React from "react"
import Lottie from "react-lottie"
import * as loading from "../../assets/paperplane.json"
import "./Loader.css"

const defaultOptions = {
  loop: true,
  autoplay: true,
  animationData: loading.default,
  rendererSettings: {
    preserveAspectRatio: "xMidYMid slice",
  },
}

const Loader = () => {
  return (
    <div className="loader">
      <div className="active">
        <Lottie options={defaultOptions} height={400} width={400} />
      </div>
    </div>
  )
}

export default Loader

App.js

import React, { useState, useEffect } from "react"
import { BrowserRouter, Route, Switch } from "react-router-dom"
import Header from "./components/header/Header"
import Loader from "./components/loader/Loader"
import Home from "./screens/Home/Home"
import Works from "./screens/Works/Works"
import About from "./screens/About/About"
import Contact from "./screens/Contact/Contact"
import WebProjects from "./screens/WebProjects/WebProjects"
import DesignProjects from "./screens/DesignProjects/DesignProjects"

function App() {
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    }, 5000)
  }, [])
  return (
    <>
      {loading ? (
        <Loader loading={loading} />
      ) : (
        <BrowserRouter>
          <Header />
          <main>
            <Switch>
              <Route path="/" component={Home} exact />
              <Route path="/about" component={About} />
              <Route path="/works/web-projects" component={WebProjects} />
              <Route
                path="/works/designs-projects"
                component={DesignProjects}
              />
              <Route path="/works" component={Works} />
              <Route path="/contact" component={Contact} />
            </Switch>
          </main>
        </BrowserRouter>
      )}
    </>
  )
}

export default App

Answer 1

如果我没理解错，你只需要更改这一行

  const [loading, setLoading] = useState(true) // instead of false

因为无论如何你都需要首先显示加载程序。

我觉得你也可以先去掉selsetLoading

  useEffect(() => {
    // setLoading(true) - can be removed
    setTimeout(() => {
      setLoading(false)
    }, 5000)
  }, [])

在预加载器页面呈现之前立即显示网站主页

Immediately showing website Home page before the preloader page render

javascript

reactjs

dom

preloader

lottie