当在React Router中使用React.lazy时出现的错误

2 年 ago
清, 扬
1 minute

参考React Router v6教程进行实现后，build时index.js文件的大小会变得很大。为了解决这个问题，我将各个组件设置为动态导入。

import React, {lazy} from 'react'
import ReactDOM from 'react-dom/client'
import {
    createRoutesFromElements,
    createBrowserRouter,
    RouterProvider,
    Route,
} from "react-router-dom";
const Index = lazy(() => import('./routes/Index'));
const Root = lazy(() => import('./routes/Root'));
const Hoge = lazy(() => import('./routes/Hoge'));

const router = createBrowserRouter(
    createRoutesFromElements(
        <Route path="/" element={<Root />} >
            <Route>
                <Route index element={<Index />} />
                <Route path="hoge" element={<Hoge />} />
            </Route>
        </Route>
    )
);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

使用React.lazy时，由于屏幕转换导致出现错误。

Oops!
Sorry, an unexpected error has occurred.

A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

解决方法 (jiě jué fǎ)

<div>
  <Outlet />
</div>

<Suspense fallback={<div>Loading...</div>}>
  <Outlet />
</Suspense>

请依据下列内容提供中文翻译，仅需要一种选项：参考

 

bannerAds