如何通过React路由器将缓慢的页面转换为重路由？

Question

我有一个React项目，并使用ReactiveR外层DOM v6来管理我的所有路由。

我有一条使用相当重组件的路由，当切换到该重组件时，会出现1+第二次延迟，直到当前页面消失，新的页面出现，因为呈现该组件需要时间。

在尝试加载组件之前，是否有一种改变页面的方法，或者在加载组件时显示一个“加载”页面？

模拟问题的演示

编辑:这有点含糊，但我所说的“重路由”指的是，每当您更改到它的路径时，它就会慢慢呈现。

Answer 1

您可以做的是实现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。