1.在组件目录中创建一个名为Loader.js的新文件。
2.在Loader.js中，添加以下代码：

import { useEffect, useState } from 'react';

const Loader = () => {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const handleStart = () => setLoading(true);
    const handleComplete = () => setLoading(false);

    Router.events.on('routeChangeStart', handleStart);
    Router.events.on('routeChangeComplete', handleComplete);
    Router.events.on('routeChangeError', handleComplete);

    return () => {
      Router.events.off('routeChangeStart', handleStart);
      Router.events.off('routeChangeComplete', handleComplete);
      Router.events.off('routeChangeError', handleComplete);
    };
  }, []);

  return loading ? <div>Loading...</div> : null;
};

export default Loader;

3.在主布局组件（例如Layout.js）中，导入并使用Loader组件：

import Loader from './Loader';

const Layout = ({ children }) => {
  return (
    <div>
      <Loader />
      {children}
    </div>
  );
};

export default Layout;

4.使用布局组件 Package 需要加载指示器的页面或组件：

import Layout from '../components/Layout';

const HomePage = () => {
  return (
    <Layout>
      {/* Your page content */}
    </Layout>
  );
};

export default HomePage;