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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
import React, { Suspense } from 'react';
import StateProvider from './StateProvider';
import { HashRouter as Router, Route, Routes } from 'react-router-dom';
import Loading2 from './Loading2';
import ErrorBoundary from './ErrorBoundary';
import SideBar from './SideBar';
import Home from './Home';
import Logs from './Logs';
import Config from './Config';
import StyleGuide from './StyleGuide';
import Connections from './Connections';
import APIDiscovery from './APIDiscovery';
import { initialState, actions } from '../store';
import './Root.css';
import s0 from './Root.module.css';
const Proxies = React.lazy(() =>
import(
/* webpackChunkName: "proxies" */
/* webpackPrefetch: true */
/* webpackPreload: true */
'./Proxies'
)
);
const Rules = React.lazy(() =>
import(
/* webpackChunkName: "rules" */
/* webpackPrefetch: true */
/* webpackPreload: true */
'./Rules'
)
);
const routes = [
['home', '/', <Home />],
['connections', '/connections', <Connections />],
['configs', '/configs', <Config />],
['logs', '/logs', <Logs />],
['proxies', '/proxies', <Proxies />],
['rules', '/rules', <Rules />],
__DEV__ ? ['style', '/style', <StyleGuide />] : false
].filter(Boolean);
const Root = () => (
<ErrorBoundary>
<StateProvider initialState={initialState} actions={actions}>
<Router>
<div className={s0.app}>
<APIDiscovery />
<SideBar />
<div className={s0.content}>
<Suspense fallback={<Loading2 />}>
<Routes>
{routes.map(([key, path, element]) => (
<Route key={key} path={path} element={element} />
))}
</Routes>
</Suspense>
</div>
</div>
</Router>
</StateProvider>
</ErrorBoundary>
);
export default Root;
|
