使用 reach-router 在每个页面上延迟加载

Question

我正在尝试实现页面加载（实际上是假页面加载），建立的超时时间长达 1500 秒（我的控制）。使用 reach/router 库，就像 Jack 的网站示例 https://jacekjeznach.com（单击每个页面以查看加载）。

我几乎成功地加载了页面，但不是很成功。页面加载仅在我刷新页面时发生。只是因为 step 只工作刷新或 actaul 页面到页面而不是 SPA 路由。 objective 是 "fake page load" 在切换路线或从导航链接中获取其他词的组件时，所以这是我目前所拥有的...


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 用于 Suspense，但想不出如何设置。

我运行没有想法，有什么想法或建议吗？感谢您的帮助，在此先感谢。

Answer 1

您可以编写一个包装器组件，然后用它包装您的所有页面。它既快又脏，但它确实有效..

Live demo can be found here

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>
  );
}

使用 reach-router 在每个页面上延迟加载

Delay load on every page with reach-router

reactjs

reach-router