Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit e68bad1

Browse files
committed
add lazy loading example
1 parent 061bb14 commit e68bad1

File tree

6 files changed

+123
-1
lines changed

6 files changed

+123
-1
lines changed

‎package-lock.json

Lines changed: 57 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"serve": "vite preview"
88
},
99
"dependencies": {
10+
"@loadable/component": "^5.15.2",
1011
"history": "^5.1.0",
1112
"query-string": "^7.0.1",
1213
"react": "^17.0.0",

‎src/App.LazyLoading.jsx

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import * as React from 'react';
2+
import { Routes, Route, Link } from 'react-router-dom';
3+
import loadable from '@loadable/component';
4+
5+
const Home = loadable(() => import('./pages/Home'), {
6+
resolveComponent: (components) => components.Home,
7+
});
8+
9+
const About = loadable(() => import('./pages/About'), {
10+
resolveComponent: (components) => components.About,
11+
});
12+
13+
const App = () => {
14+
return (
15+
<>
16+
<h1>React Router</h1>
17+
18+
<nav>
19+
<Link to="/">Home</Link>
20+
<Link to="/about">About</Link>
21+
</nav>
22+
23+
<Routes>
24+
<Route index element={<Home />} />
25+
<Route path="about" element={<About />} />
26+
<Route path="*" element={<NoMatch />} />
27+
</Routes>
28+
</>
29+
);
30+
};
31+
32+
const NoMatch = () => {
33+
return <p>There's nothing here: 404!</p>;
34+
};
35+
36+
export default App;
37+
38+
// import loadable from '@loadable/component';
39+
40+
// import * as ROUTES from '@/constants/routes';
41+
// import { Page } from '@/components/Layout/Page';
42+
43+
// import { Navigation } from './Navigation';
44+
45+
// const ReviewKpis = loadable(() => import('./ReviewKpis'), {
46+
// resolveComponent: (components) => {
47+
// return components.ReviewKpis;
48+
// },
49+
// });

‎src/main.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,11 @@ import { QueryParamProvider } from 'use-query-params';
99

1010
// import App from './App.jsx';
1111
// import App from './App.Redirect.jsx';
12-
import App from './App.Authentication.jsx';
12+
// import App from './App.Authentication.jsx';
1313
// import App from './App.Nested.jsx';
1414
// import App from './App.Descendant.jsx';
1515
// import App from './App.QueryParams.jsx';
16+
import App from './App.LazyLoading.jsx';
1617

1718
// use-query-params adapeter for React Router 6
1819
const RouteAdapter = ({ children }) => {

‎src/pages/About.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const About = () => {
2+
return (
3+
<>
4+
<h2>About</h2>
5+
</>
6+
);
7+
};

‎src/pages/Home.jsx

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
export const Home = () => {
2+
return (
3+
<>
4+
<h2>Home</h2>
5+
</>
6+
);
7+
};

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /