Fixed routing

src/app.tsx

@@ -0,0 +1,13 @@
+import { Suspense, type Component } from 'solid-js'
+
+const App: Component<{ children: Element }> = (props) => {
+  return (
+    <>
+      <main>
+        <Suspense>{props.children}</Suspense>
+      </main>
+    </>
+  )
+}
+
+export default App

src/index.tsx

@@ -0,0 +1,13 @@
+import './index.sass'
+import { render } from 'solid-js/web'
+import { Router } from '@solidjs/router'
+import { routes } from './routes'
+import App from './app.tsx'
+
+const root = document.getElementById('root') as HTMLElement
+
+if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
+  throw new Error('Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?')
+}
+ // @ts-ignore
+render(() => <Router root={(props) => <App>{props.children}</App>}>{routes}</Router>, root)

src/layouts/Layout.tsx

@@ -1,14 +0,0 @@
-import './Layout.sass'
-import type { JSXElement } from 'solid-js'
-
-interface Props {
-  children: JSXElement
-}
-
-export default (props: Props) => {
-  return (
-    <>
-      <div class="layout">{props.children}</div>
-    </>
-  )
-}

src/routers/router.tsx

@@ -1,33 +0,0 @@
-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

src/routes.tsx

@@ -0,0 +1,27 @@
+import { lazy } from 'solid-js'
+import type { RouteDefinition } from '@solidjs/router'
+
+import Index from './pages/IndexPage/Index'
+
+export const routes: RouteDefinition[] = [
+  {
+    path: '/',
+    component: Index,
+  },
+  {
+    path: '/main',
+    component: lazy(() => import('./pages/MainPage/Main')),
+  },
+  {
+    path: '/register',
+    component: lazy(() => import('./pages/RegisterPage/Register.tsx')),
+  },
+  {
+    path: '/login',
+    component: lazy(() => import('./pages/LoginPage/Login.tsx')),
+  },
+  {
+    path: '**',
+    component: lazy(() => import('./errors/404')),
+  },
+]