forked from theninthsky/client-side-rendering
-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.jsx
40 lines (32 loc) · 1.29 KB
/
App.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import { lazy, Suspense } from 'react'
import { Routes, Route, Navigate } from 'react-router-dom'
import pagesManifest from 'pages-manifest.json'
import Navigation from 'components/Navigation'
import Layout from 'components/Layout'
const Home = lazy(() => import(/* webpackChunkName: "home" */ 'pages/Home'))
const LoremIpsum = lazy(() => import(/* webpackChunkName: "lorem-ipsum" */ 'pages/LoremIpsum'))
const Pokemon = lazy(() => import(/* webpackChunkName: "pokemon" */ 'pages/Pokemon'))
const PokemonInfo = lazy(() => import(/* webpackChunkName: "pokemon-info" */ 'pages/PokemonInfo'))
const WebVitals = lazy(() => import(/* webpackChunkName: "core-web-vitals" */ 'pages/WebVitals'))
const PeriodicSync = lazy(() => import(/* webpackChunkName: "periodic-sync" */ 'pages/PeriodicSync'))
const pages = [Home, LoremIpsum, Pokemon, PokemonInfo, WebVitals, PeriodicSync]
const routes = pagesManifest.map(({ path }, ind) => {
const Element = pages[ind]
return <Route key={path} path={path} element={<Element />} />
})
const App = () => {
return (
<>
<Navigation />
<Layout>
<Suspense>
<Routes>
{routes}
<Route path="/*" element={<Navigate replace to="/" />} />
</Routes>
</Suspense>
</Layout>
</>
)
}
export default App