使用react router v6 beta进行延迟加载

Question

这是我使用react router dom v6.0.0测试版的app.js。

const App = () => {
const routing = useRoutes(routes)
return (
<AuthProvider>
<MuiThemeProvider theme={theme}>
<GlobalStyles />
{routing}
</MuiThemeProvider>
</AuthProvider>
)
}

路由在routes.js中。

const routes = [
{
path: "/",
element: <LoggedOutLayout />,
children: [
{
path: "auth",
element: <AuthLayout />,
children: [
{
path: "/register",
element: <Register />,
},
{
path: "/login",
element: <Login />,
},
{ path: "", element: <Navigate to="/auth/login" /> },
{ path: "/", element: <Navigate to="/auth/login" /> },
],
},
{ path: "404", element: <NotFound /> },
{ path: "*", element: <Navigate to="/404" /> },
{ path: "", element: <Navigate to="/app/dashboard" /> },
{ path: "/", element: <Navigate to="/app/dashboard" /> },
]
.......

如何在v6中实现延迟加载?我在考虑React。App.js和React中的暂停。在routes.js中偷懒。任何反馈都是感激的。由于

Answer 1

现在回答你的问题可能太晚了，你可能已经知道如何使用react和最新的react-router-dom v6 api通过路由实现代码分割了。

但我还是要试着回答这个问题。

我只是碰巧在前几天的另一个项目中使用了v6，下面是我的方法。

首先，只要遵循react官方文档中React.lazy部分的指导，然后导入你的页面(路由的元素部分)…

const { Lazy } from 'react';
const LoggedOutLayout = Lazy(() => import('../your/path/to/LoggedOutLayout'));
...
// I'll skip the others, you know the drill.
const routes = [
{
path: "/",
element: <LoggedOutLayout />,
children: [
{
path: "auth",
element: <AuthLayout />,
children: [
{
path: "/register",
element: <Register />,
},
{
path: "/login",
element: <Login />,
},
{ path: "", element: <Navigate to="/auth/login" /> },
{ path: "/", element: <Navigate to="/auth/login" /> },
],
},
{ path: "404", element: <NotFound /> },
{ path: "*", element: <Navigate to="/404" /> },
{ path: "", element: <Navigate to="/app/dashboard" /> },
{ path: "/", element: <Navigate to="/app/dashboard" /> },
]
.......

其次，我在一个函数组件中调用useRoutes()，在我的例子中我将其命名为Routes。

const Routes = () => {
const elements = useRoutes(routes);
return elements;
}

然后，将该组分纳入App.js，用<Suspense/>包裹

const App = () => {
return (
<AuthProvider>
<MuiThemeProvider theme={theme}>
<GlobalStyles />
<BrowserRouter>
<Suspense fallback={<div>Loading...</div>}>
<Routes/>
</Suspense>
</BrowserRouter>
</MuiThemeProvider>
</AuthProvider>
)
}

。

我不确定你是否可以直接包装{element}与<Suspense/>，我还没有测试它。但你可以试试。