reactjs - 使用到达路由器延迟每个页面的加载
问题描述
我正在尝试实现页面加载(实际上是假页面加载),建立的超时时间长达 1500 秒(我的控制)。使用到达/路由器库,就像杰克的网站示例在这里https://jacekjeznach.com(单击每个页面以查看加载)。
我已经非常成功的页面加载,但不完全。页面加载仅在我刷新页面时发生。仅仅因为步骤只工作刷新或实际页面到页面而不是 SPA 路由。目标是在切换路由或从导航链接中获取其他单词的组件时具有“假页面加载”,所以这就是我到目前为止所拥有的......
import React, { useEffect, useState, lazy, Suspense } from "react";
import ReactDOM from "react-dom";
import { Link, Router } from "@reach/router";
import styled from "styled-components";
import "./styles.css";
function App() {
const [pageRender, setPageRender] = useState(true);
useEffect(() => {
const loadingTime = setTimeout(() => setPageRender(false), 1500);
return () => clearTimeout(loadingTime);
}, []);
return <div>{pageRender ? <Loader /> : <Route />}</div>;
}
//-----------Router (Reach Router)---------------------------
function Route({ children }) {
return (
<div>
<SetNav>
<Link to="/">Home</Link>
<Link to="/About">About</Link>
<Link to="/Contact">Contact</Link>
</SetNav>
<Router>
<Home path="/" />
<About path="/About" />
<Contact path="/Contact" />
</Router>
</div>
);
}
const SetNav = styled.nav`
display: flex;
align-items: center;
background-color: #ddd;
height: 50px;
a {
padding: 0 10px;
}
`;
// -------- Home (Components)----------------------
function Home() {
return (
<div>
<h1>Home Page</h1>
</div>
);
}
// -------- About (Components)----------------------
function About() {
return (
<div>
<h1>About Page</h1>
</div>
);
}
// -------- Contact (Components)----------------------
function Contact() {
return (
<div>
<h1>Contact Page</h1>
</div>
);
}
//--------- Loader (Text/Spinner/Processbar)--------------
function Loader() {
return <div>Loading...</div>;
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
我有感觉,这些语法useEffect(setTimeout(()=> (...), 1500)
或useEffect(setInterval(()=> (...), 1500)
可以适用于路线,但我无法找到更好的解决方案。
我也尝试过 Suspense/Lazy,是的,它也可以工作,但不幸的是,我无法控制加载时间(延迟时间)。
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { Link, Router } from "@reach/router";
import styled from "styled-components";
const Home = React.lazy(import('./compments/Home'))
const About = React.lazy(import('./compments/About'))
const Contact = React.lazy(import('./compments/Contact'))
<div>
<Suspense fallback={<Loader/>}/>
<nav>
<Link to="/">Home</Link>
<Link to="/About">About</Link>
<Link to="/Contact">Contact</Link>
</nav>
<Router>
<Home path="/" />
<About path="/About" />
<Contact path="/Contact" />
</Router>
</div>
<Suspense />
我曾考虑过使用setTimeout
forSuspense
但不知道如何设置它。
我的想法快用完了,还有想法或建议?感谢您的帮助,在此先感谢。
解决方案
你可以编写一个包装器组件,然后用它来包装你的所有页面。它又快又脏,但它可以工作。
Loader
包装器组件:
export default function Loader({children}) {
const [loading, setLoading] = useState(true);
useEffect(() => {
setTimeout(() => {
setLoading(false);
}, 3000)
}, []);
return(
<div>
{loading
? <CircularProgress />
: children}
</div>
);
}
Loader
使用中的包装:
export default function Crayons(props) {
return (
<Loader>
<div>
<h1>Crayons Page</h1>
{props.match.params.id
? <p>Crayon ID: {props.match.params.id}</p>
: ""}
</div>
</Loader>
);
}
推荐阅读
- python - 在 Django 中处理 .wasm.gz 和 .data 文件的正确方法?
- sql - 如何在两个表之间创建多个外键?
- vb.net - 如何以编程方式从记事本复制文本并将其粘贴到我的 vb 网络应用程序中的特定文本框中?
- sql - PL SQL Pivot:使用不同的聚合
- php - 通过 Laravel 和 livewire 更新循环记录
- python - 如何在熊猫中获得上个月的平均值
- html - 如何使用 kaltura 的 kWidget 嵌入视频?
- github - Uncaught ReferenceError: process is not defined Github Personal access token issue
- javascript - 暂停函数直到 promise 被解决
- ruby-on-rails - 我如何在graphql的模型中分离枚举类型