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 LazyLoad, { lazyImport } from "./LazyLoad";
const Login = React.lazy(() => import("./Login"));
const WaitRoom = React.lazy(() => import("./WaitRoom"));
const Mora = React.lazy(() => import("./Mora"));
const NeosDuel = React.lazy(() => import("./Duel/main"));
const Login = lazyImport("./Login");
const WaitRoom = lazyImport("./WaitRoom");
const Mora = lazyImport("./Mora");
const NeosDuel = lazyImport("./Duel/main");
export default function () {
// FIXME: 这里Mora/Duel路由应该由每个房间指定一个路径
return (
<Routes>
<Route
path="/"
element={
<Suspense fallback={<div>Loading...</div>}>
<Login />
</Suspense>
}
/>
<Route path="/" element={<LazyLoad lazy={<Login />} />} />
<Route
path="/room/:player/:passWd/:ip"
element={
<Suspense fallback={<div>Loading...</div>}>
<WaitRoom />
</Suspense>
}
element={<LazyLoad lazy={<WaitRoom />} />}
/>
<Route
path="/room/:player/:passWd/:ip"
element={
<Suspense fallback={<div>Loading...</div>}>
<Mora />
</Suspense>
}
path="/mora/:player/:passWd/:ip"
element={<LazyLoad lazy={<Mora />} />}
/>
<Route
path="/room/:player/:passWd/:ip"
element={
<Suspense fallback={<div>Loading...</div>}>
<NeosDuel />
</Suspense>
}
path="/duel/:player/:passWd/:ip"
element={<LazyLoad lazy={<NeosDuel />} />}
/>
</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