如何在React Router上制作加载屏幕？

Question

我大约2个月前开始学习react。现在我正在尝试使用 spline 3d 进行一些交互式设计来构建我的作品集。问题是加载时间太长，我想制作一个加载屏幕，当我的 3d 开始元素渲染时停止加载准确时间

Answer 1

您可以通过多种方式自行创建。 你可以使用图书馆

react-loader-spinner

在控制台上输入

npm install react-loader-spinner --save

import React from 'react';
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import Loader from "react-loader-spinner";
import '../style.css';
const LoaderComponent = () => {
    return (
        <div className="loader">
            <Loader
                type="Circles"
                color="#dc1c2c"
                height={50}
                width={100}
                //timeout={1000} //3 secs
            />
        </div>
    );
};

export default LoaderComponent;

显示组件有多种方式，这里是 GraphQL 从 DB 获取数据的方式

const [results] = useQuery({ query: PRODUCT_QUERY });
  const { data, fetching, error } = results;

  //Check or the data coming in
  if (fetching) return <p>Loading...</p>;

  if (error) return <p>Oh no... {error.message}</p>;

这是一种通过 HTTP 请求获取数据的方法：

const UserList = () => {
  const auth = useContext(AuthContext);
  const { isLoading, error, sendRequest, clearError } = useHttpClient();
  const [loadedUsers, setLoadedUsers] = useState();

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        //with fetch, the default request type is GET request
        const responseData = await sendRequest(
          process.env.REACT_APP_BACKEND_URL + "/users"
        );
        setLoadedUsers(responseData.users); //users propeties is the given value from the backend (user-controllers.js on getUsers())
      } catch (err) {}
    };
    fetchUsers();
  }, [sendRequest]);

  

  return (
    <React.Fragment>
      <ErrorModal error={error} onClear={clearError} />
      {isLoading && <LoadingSpinner asOverlay />}
      {/* we need to render loadedUsers only if not empty*/}
      {!isLoading && loadedUsers && (
        <div className="userList">
          <span className="Title">Display Here the data</span>
        </div>
      )}
    </React.Fragment>
  );
};

Answer 2

  

// this logic is simple 
// first, you have created one boolean usestate(false) and then load your screen that time usestate are true and process is complete after usesate are false
//  I will show you the following example. I hope that helps you.

export default function Gradients(props) {
   const [isLoading, setIsLoading] = useState(false);

   const getAllGradient = () => {
    setIsLoading(true);
    axios
      .get("https://localhost:5000")
      .then((res) => {
        const gradientColors = res.data;
        // process complete after isLoading are false
        // your process (this only example)
         setIsLoading(false);
       })
    
  }
  return(
    <div>
           {
    isLoading ? <Loader> : <YourComponent />
     }
     </div>
    
    )
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

我做了下面的事情，我对此非常满意。这是用于带有加载器功能的 React Router v6。

请注意，只有在执行加载程序功能时才会显示加载屏幕。如果您想在渲染路由组件后继续显示它并从组件内将其关闭，您可以将

setLoaded

函数作为道具传递给路由器配置中的组件。

import React, { useState, useEffect } from 'react';
import {
  createBrowserRouter,
  Outlet,
  RouterProvider,
} from 'react-router-dom';

// Have a function for creating your router so that you can pass
// a function as a prop to your page wrapper, in order for it to let
// you know when a page has loaded
const wireRouter = (setLoaded) => createBrowserRouter([
  {
    path: '/',
    element: <PageWrapper setLoaded={setLoaded} />,
    children: [
      {
        path: '/*',
        element: <PageNotFound />,
      },
      {
        path: '/',
        element: <Home />,
      },
      {
        path: '/pageThatLoadsSomething/',
        element: <PageThatLoadsSomething />,
        loader: () => functionThatLoadsSomething(),
      }
    ]
  }
]);

// In your page wrapper set loaded to true immediately after you render
function PageWrapper({ setLoaded }) {
  useEffect(() => {
    setLoaded(true);
  }, []);

  return <Outlet />;
}

// Make a root component that keeps state of whether a page is loaded
// and pass the setter to update it to the function that creates your
// router. Render a loader component conditionally, while the page is
// not loaded.
function Root() {
  const [pageLoaded, setLoaded] = useState(false);

  return (
    <React.StrictMode>
      { !pageLoaded ? <Loading /> : null }
      <RouterProvider router={wireRouter(setLoaded)} />
    </React.StrictMode>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Root />);