Question

我正在尝试实现页面建立（实际上是伪造的页面加载），并且建立时间最多为1500秒（我的控制）。就像杰克（Jack）的网站示例https://jacekjeznach.com一样，使用到达/路由器库（单击每个页面以查看加载情况）。

我已经成功地完成了页面加载，但是还不完全成功。页面加载仅在刷新页面时发生。仅仅因为step仅刷新或actaul页面到页面而不是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用于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>
  );
}

使用到达路由器延迟每一页上的加载

1 个答案: