Fixed layout and routing

src/layouts/Layout.tsx

@@ -1,27 +1,14 @@
 import './Layout.sass'
-import { lazy } from 'solid-js'
-import { render } from 'solid-js/web'
-import { Router } from '@solidjs/router'
+import type { JSXElement } from 'solid-js'
 
-const root = document.getElementById('root')
+interface Props {
+  children: JSXElement
+}
 
-const routes = [
-  {
-    path: '/',
-    component: lazy(() => import('../pages/IndexPage/Index.tsx')),
-  },
-  {
-    path: '/main',
-    component: lazy(() => import('../pages/MainPage/Main.tsx')),
-  },
-  {
-    path: '/register',
-    component: lazy(() => import('../pages/RegisterPage/Register.tsx')),
-  },
-  {
-    path: '/login',
-    component: lazy(() => import('../pages/LoginPage/Login.tsx')),
-  },
-]
-
-render(() => <Router>{routes}</Router>, root!)
+export default (props: Props) => {
+  return (
+    <>
+      <div class="layout">{props.children}</div>
+    </>
+  )
+}

src/routers/router.tsx

@@ -0,0 +1,33 @@
+import { lazy } from 'solid-js'
+import Layout from '../layouts/Layout.tsx'
+
+const routes = [
+  {
+    path: '/',
+    component: (props: any) => <Layout>{props.children}</Layout>,
+    children: [
+      {
+        path: '/',
+        component: lazy(() => import('../pages/IndexPage/Index.tsx')),
+      },
+      {
+        path: '/main',
+        component: lazy(() => import('../pages/MainPage/Main.tsx')),
+      },
+      {
+        path: '/register',
+        component: lazy(() => import('../pages/RegisterPage/Register.tsx')),
+      },
+      {
+        path: '/login',
+        component: lazy(() => import('../pages/LoginPage/Login.tsx')),
+      },
+    ],
+  },
+  {
+    path: '**',
+    component: () => <div>404</div>,
+  },
+]
+
+export default routes