这些是我拥有的两个组件,我的问题是我在哪里放置
Navagtion/index.jsx
import React from "react";
import {
RouterProvider,
createBrowserRouter,
createRoutesFromElements
} from "react-router-dom";
import Root from "./Root";
const router = createBrowserRouter(createRoutesFromElements(Root));
const Navigation = () => {
return <RouterProvider router={router} />;
};
export default Navigation;
Root.jsx
import React from "react";
import { Route } from "react-router-dom";
const PublicLayout = React.lazy(() => "../Layouts/PublicLayout");
const PrivateLayout = React.lazy(() => "../Layouts/PrivateLayout");
const Index = React.lazy(() => "../Pages");
const Welcome = React.lazy(() => "../Pages/Welcome");
const Login = React.lazy(() => "../Pages/Login");
const Register = React.lazy(() => "../Pages/Register");
const Root = (
<Route path="/" element={<Index />}>
<Route element={<PublicLayout />}>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Route>
<Route element={<PrivateLayout />}>
<Route path="/welcome" element={<Welcome />} />
</Route>
</Route>
);
export default Root;
如何在组件内延迟加载路由?我在哪里包装所有来自 Suspense 的路线。
remix-run/react-router
demo 显示将每个延迟导入的组件包装在自己的React.Suspense
组件中:
import React from "react";
import { Route } from "react-router-dom";
const PublicLayout = React.lazy(() => "../Layouts/PublicLayout");
const PrivateLayout = React.lazy(() => "../Layouts/PrivateLayout");
const Index = React.lazy(() => "../Pages");
const Welcome = React.lazy(() => "../Pages/Welcome");
const Login = React.lazy(() => "../Pages/Login");
const Register = React.lazy(() => "../Pages/Register");
const Root = (
<Route
path="/"
element={(
<React.Suspense fallback={<>...</>}>
<Index />
</React.Suspense>
)}
>
<Route
element={(
<React.Suspense fallback={<>...</>}>
<PublicLayout />
</React.Suspense>
)}
>
<Route
path="/login"
element={(
<React.Suspense fallback={<>...</>}>
<Login />
</React.Suspense>
)}
/>
<Route
path="/register"
element={(
<React.Suspense fallback={<>...</>}>
<Register />
</React.Suspense>
)}
/>
</Route>
<Route
element={(
<React.Suspense fallback={<>...</>}>
<PrivateLayout />
</React.Suspense>
)}
>
<Route
path="/welcome"
element={(
<React.Suspense fallback={<>...</>}>
<Welcome />
</React.Suspense>
)}
/>
</Route>
</Route>
);
export default Root;
您可以将
组件放置在懒惰上方的任何位置 成分。你甚至可以用一个包裹多个惰性组件Suspense
组件.Suspense
您还可以创建一个布局路线,将
React.Suspense
包裹在 Outlet
组件周围。
例子:
import React from "react";
import { Route } from "react-router-dom";
const PublicLayout = React.lazy(() => "../Layouts/PublicLayout");
const PrivateLayout = React.lazy(() => "../Layouts/PrivateLayout");
const Index = React.lazy(() => "../Pages");
const Welcome = React.lazy(() => "../Pages/Welcome");
const Login = React.lazy(() => "../Pages/Login");
const Register = React.lazy(() => "../Pages/Register");
const SuspenseLayout = () => (
<React.Suspense fallback={<>...</>}>
<Welcome />
</React.Suspense>
);
const Root = (
<Route element={<SuspenseLayout />}>
<Route path="/" element={<Index />}>
<Route element={<PublicLayout />}>
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
</Route>
<Route element={<PrivateLayout />}>
<Route path="/welcome" element={<Welcome />} />
</Route>
</Route>
</Route>
);
export default Root;
由于
React.Suspense
组件只需要在树中比惰性组件更高,您也可以将 RouterProvider
包装在 Navigation
中的 Suspense
组件中。
import React from "react";
import {
RouterProvider,
createBrowserRouter,
createRoutesFromElements
} from "react-router-dom";
import Root from "./Root";
const router = createBrowserRouter(createRoutesFromElements(Root));
const Navigation = () => {
return (
<React.Suspense fallback={<>...</>}>
<RouterProvider router={router} />
</React.Suspense>
);
};
export default Navigation;
我把 Root 组件包裹在路由元素上,它是这样工作的:
/路由器/index.jsx
const Root = lazy(() => import('../layout/Root'))
const Home = lazy(() => import('../pages/Home'))
const About = lazy(() => import('../pages/About'))
const Experience = lazy(() => import('../pages/Experience'))
const Projects = lazy(() => import('../pages/Projects'))
const Contact = lazy(() => import('../pages/Contact'))
export const router = createHashRouter([
{
path: '/',
element: <Suspense fallback={<Loader />}><Root /></Suspense>,
errorElement: <NotFound />,
children: [
{
index: true,
element: <Home />
},
{
path: '/about',
element: <About />
},
{
path: '/experience',
element: <Experience />
},
{
path: '/projects',
element: <Projects />
},
{
path: '/contact',
element: <Contact />
}
]
}
])