您可以实现React.lazy()来延迟加载页面，然后使用React.Suspense（）在转换时显示正在加载的页面。

import React, { Suspense } from 'react';

// import MyPage from './pages/MyPage'
// instead of importing MyPage like above, use lazy, like below
const MyPage = React.lazy(() => import('./pages/MyPage'));

function App() {
    return (
        <Suspense
             fallback={<div><p>Loading...</p></div>}
        >
            <Routes>
                <Route path='/mypath' element={<MyPage} />
                // other route data                        
            </Routes>
        </Suspense>                
    )
}

export default App;

这是一个非常简单的例子。它的作用是当你最初加载页面时，MyPage不会被加载。页面的加载将被延迟到需要它的时候。一旦你转到/mypath，MyPage就会被加载，并且Suspense组件将显示加载<p>标签。当然，这可以是你想要的任何元素，甚至是一个组件。
或者，在大组件内部，可以使用useState()创建一个简单的布尔isLoading和setIsLoading状态，并在初始时将其设置为true，然后，如果isLoading为true，则呈现一个正在加载的组件，操作完成后，将isLoading设置为false。