|
1 | 1 | import { Navigate, createBrowserRouter } from 'react-router-dom' |
2 | 2 | import App from '../App' |
3 | | -import { Login } from '../components/Login' |
4 | | -import { EmailPage } from '../components/EmailPage' |
5 | | -import { |
6 | | - crossSearchPage, |
7 | | - frontPage, |
8 | | - localityPage, |
9 | | - museumPage, |
10 | | - personPage, |
11 | | - projectPage, |
12 | | - referencePage, |
13 | | - regionPage, |
14 | | - speciesPage, |
15 | | - timeBoundPage, |
16 | | - timeUnitPage, |
17 | | -} from '../components/pages' |
18 | | -import { ProjectNewPage } from '../pages/ProjectNewPage' |
19 | | -import { ProjectEditPage } from '../pages/projects/ProjectEditPage' |
| 3 | + |
| 4 | +const loadPagesElement = async ( |
| 5 | + key: |
| 6 | + | 'crossSearchPage' |
| 7 | + | 'localityPage' |
| 8 | + | 'museumPage' |
| 9 | + | 'personPage' |
| 10 | + | 'projectPage' |
| 11 | + | 'referencePage' |
| 12 | + | 'regionPage' |
| 13 | + | 'speciesPage' |
| 14 | + | 'timeBoundPage' |
| 15 | + | 'timeUnitPage' |
| 16 | +) => { |
| 17 | + const pagesModule = await import('../components/pages') |
| 18 | + |
| 19 | + return { |
| 20 | + Component: () => pagesModule[key], |
| 21 | + } |
| 22 | +} |
20 | 23 |
|
21 | 24 | const router = createBrowserRouter([ |
22 | 25 | { |
23 | 26 | path: '/', |
24 | 27 | element: <App />, |
25 | 28 | children: [ |
26 | | - { index: true, element: frontPage }, |
27 | | - { path: 'occurrence/:lid/:speciesId', element: crossSearchPage }, |
| 29 | + { |
| 30 | + index: true, |
| 31 | + lazy: async () => { |
| 32 | + const { FrontPage } = await import('../components/FrontPage') |
| 33 | + return { Component: FrontPage } |
| 34 | + }, |
| 35 | + }, |
| 36 | + { path: 'occurrence/:lid/:speciesId', lazy: () => loadPagesElement('crossSearchPage') }, |
28 | 37 | { path: 'occurrence/:id', element: <Navigate to="/occurrence" replace /> }, |
29 | | - { path: 'occurrence', element: crossSearchPage }, |
30 | | - { path: 'crosssearch/:id?', element: crossSearchPage }, |
31 | | - { path: 'locality/:id?', element: localityPage }, |
32 | | - { path: 'species/:id?', element: speciesPage }, |
33 | | - { path: 'museum/:id?', element: museumPage }, |
34 | | - { path: 'reference/:id?', element: referencePage }, |
35 | | - { path: 'time-unit/:id?', element: timeUnitPage }, |
36 | | - { path: 'time-bound/:id?', element: timeBoundPage }, |
37 | | - { path: 'region/:id?', element: regionPage }, |
38 | | - { path: 'person/:id?', element: personPage }, |
39 | | - { path: 'project/new', element: <ProjectNewPage /> }, |
40 | | - { path: 'project/:id/edit', element: <ProjectEditPage /> }, |
41 | | - { path: 'project/:id?', element: projectPage }, |
42 | | - { path: 'email', element: <EmailPage /> }, |
43 | | - { path: 'login', element: <Login /> }, |
| 38 | + { path: 'occurrence', lazy: () => loadPagesElement('crossSearchPage') }, |
| 39 | + { path: 'crosssearch/:id?', lazy: () => loadPagesElement('crossSearchPage') }, |
| 40 | + { path: 'locality/:id?', lazy: () => loadPagesElement('localityPage') }, |
| 41 | + { path: 'species/:id?', lazy: () => loadPagesElement('speciesPage') }, |
| 42 | + { path: 'museum/:id?', lazy: () => loadPagesElement('museumPage') }, |
| 43 | + { path: 'reference/:id?', lazy: () => loadPagesElement('referencePage') }, |
| 44 | + { path: 'time-unit/:id?', lazy: () => loadPagesElement('timeUnitPage') }, |
| 45 | + { path: 'time-bound/:id?', lazy: () => loadPagesElement('timeBoundPage') }, |
| 46 | + { path: 'region/:id?', lazy: () => loadPagesElement('regionPage') }, |
| 47 | + { path: 'person/:id?', lazy: () => loadPagesElement('personPage') }, |
| 48 | + { |
| 49 | + path: 'project/new', |
| 50 | + lazy: async () => { |
| 51 | + const { ProjectNewPage } = await import('../pages/ProjectNewPage') |
| 52 | + return { Component: ProjectNewPage } |
| 53 | + }, |
| 54 | + }, |
| 55 | + { |
| 56 | + path: 'project/:id/edit', |
| 57 | + lazy: async () => { |
| 58 | + const { ProjectEditPage } = await import('../pages/projects/ProjectEditPage') |
| 59 | + return { Component: ProjectEditPage } |
| 60 | + }, |
| 61 | + }, |
| 62 | + { path: 'project/:id?', lazy: () => loadPagesElement('projectPage') }, |
| 63 | + { |
| 64 | + path: 'email', |
| 65 | + lazy: async () => { |
| 66 | + const { EmailPage } = await import('../components/EmailPage') |
| 67 | + return { Component: EmailPage } |
| 68 | + }, |
| 69 | + }, |
| 70 | + { |
| 71 | + path: 'login', |
| 72 | + lazy: async () => { |
| 73 | + const { Login } = await import('../components/Login') |
| 74 | + return { Component: Login } |
| 75 | + }, |
| 76 | + }, |
44 | 77 | { path: '*', element: <div>Page not found.</div> }, |
45 | 78 | ], |
46 | 79 | }, |
|
0 commit comments