0

我正在尝试实现页面加载（实际上是假页面加载），建立的超时时间长达 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 />

我曾考虑过使用setTimeoutforSuspense但不知道如何设置它。

我的想法快用完了，还有想法或建议？感谢您的帮助，在此先感谢。

4

1 回答 1

2

你可以编写一个包装器组件，然后用它来包装你的所有页面。它又快又脏，但它可以工作。

现场演示可以在这里找到

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>
  );
}
于 2019-09-02T00:22:13.883 回答