javascript - 在预加载器页面渲染之前立即显示网站主页
问题描述
我从 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
应用程序.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
解决方案
如果我理解正确,您只需要更改此行
const [loading, setLoading] = useState(true) // instead of false
因为无论如何您都需要先显示加载程序。
我想你也可以先删除selsetLoading
useEffect(() => {
// setLoading(true) - can be removed
setTimeout(() => {
setLoading(false)
}, 5000)
}, [])
推荐阅读
- php - 我可以在 WAMP 服务器上运行 Angular 6 项目吗?
- ethereum - 通过另一个第三方合约发送 ERC721 代币
- express - Apollo-Server,如何与 SailsJS 一起使用?
- javascript - 使 vimeo 或 youtube 在模态打开时播放并在模态关闭时停止视频播放
- hyperledger-fabric - LDAP 上的 Hyperledger Fabric-ca 连接
- android - Android studio - 当很多口味(> 70)时同步 gradle 需要很长时间
- sql - SQL Anywhere - SELECT COUNT(PK) WHERE [条件] 性能
- android - MPAndroidChart:如何为 PieChart 中的标签设置不同的颜色?
- python - 基于时间将多个数据框加入file.txt python
- node.js - 导出并要求异步函数错误