如何在React Router中创建一个加载屏幕？

Question

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

- Htet Ah Yan

---

嗨@Htet，如果您能改善问题的质量，您将获得更高质量的帮助，请参见：https://stackoverflow.com/help/how-to-ask - JBaczuk

这实际上与 react-router 没有任何关系。只需使用一些本地的 isLoading 组件状态并有条件地呈现加载指示器即可。如果您需要进一步帮助，请编辑您的帖子以包含一个 [mcve]，其中包括您迄今为止尝试过的内容和任何问题的详细信息。 - Drew Reese

@DrewReese 是的，我也是这样做的，但这并没有对我的页面产生任何改变，一旦加载屏幕结束，我的页面加载仍然太长。 - Htet Ah Yan

那我会说，你还没有正确实现它。请分享一个实际的代码示例，这样我们就可以看到代码正在做什么，以及为什么它可能无法按预期工作。 - Drew Reese

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 方法。

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

- idan noyshul

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>

- Nayan Radadiya