Commit fdd1ae1f authored by Chunchi Che's avatar Chunchi Che

add LazyLoad component

parent 2ba42c05
import React, { Suspense } from "react";
const LazyLoad = (props: { lazy: React.ReactNode }) => {
return <Suspense fallback={<div>Loading...</div>}>{props.lazy}</Suspense>;
};
export const lazyImport = (module: string) => React.lazy(() => import(module));
export default LazyLoad;
import React, { Suspense } from "react"; import React from "react";
import { Routes, Route } from "react-router-dom"; import { Routes, Route } from "react-router-dom";
import LazyLoad, { lazyImport } from "./LazyLoad";
const Login = React.lazy(() => import("./Login")); const Login = lazyImport("./Login");
const WaitRoom = React.lazy(() => import("./WaitRoom")); const WaitRoom = lazyImport("./WaitRoom");
const Mora = React.lazy(() => import("./Mora")); const Mora = lazyImport("./Mora");
const NeosDuel = React.lazy(() => import("./Duel/main")); const NeosDuel = lazyImport("./Duel/main");
export default function () { export default function () {
// FIXME: 这里Mora/Duel路由应该由每个房间指定一个路径 // FIXME: 这里Mora/Duel路由应该由每个房间指定一个路径
return ( return (
<Routes> <Routes>
<Route <Route path="/" element={<LazyLoad lazy={<Login />} />} />
path="/"
element={
<Suspense fallback={<div>Loading...</div>}>
<Login />
</Suspense>
}
/>
<Route <Route
path="/room/:player/:passWd/:ip" path="/room/:player/:passWd/:ip"
element={ element={<LazyLoad lazy={<WaitRoom />} />}
<Suspense fallback={<div>Loading...</div>}>
<WaitRoom />
</Suspense>
}
/> />
<Route <Route
path="/room/:player/:passWd/:ip" path="/mora/:player/:passWd/:ip"
element={ element={<LazyLoad lazy={<Mora />} />}
<Suspense fallback={<div>Loading...</div>}>
<Mora />
</Suspense>
}
/> />
<Route <Route
path="/room/:player/:passWd/:ip" path="/duel/:player/:passWd/:ip"
element={ element={<LazyLoad lazy={<NeosDuel />} />}
<Suspense fallback={<div>Loading...</div>}>
<NeosDuel />
</Suspense>
}
/> />
</Routes> </Routes>
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment