From a271bdc64e93b93285d69ae80226f1982e1dd4c8 Mon Sep 17 00:00:00 2001 From: Patrick Alvin Alcala Date: Thu, 25 Sep 2025 09:22:32 +0800 Subject: [PATCH] Fixed routing --- index.html | 2 +- index.tsx | 8 ------ src/app.tsx | 13 ++++++++++ src/{layouts/Layout.sass => index.sass} | 0 src/index.tsx | 13 ++++++++++ src/layouts/Layout.tsx | 14 ----------- src/routers/router.tsx | 33 ------------------------- src/routes.tsx | 27 ++++++++++++++++++++ tsconfig.app.json | 2 +- 9 files changed, 55 insertions(+), 57 deletions(-) delete mode 100644 index.tsx create mode 100644 src/app.tsx rename src/{layouts/Layout.sass => index.sass} (100%) create mode 100644 src/index.tsx delete mode 100644 src/layouts/Layout.tsx delete mode 100644 src/routers/router.tsx create mode 100644 src/routes.tsx diff --git a/index.html b/index.html index 32df225..1c9c52c 100644 --- a/index.html +++ b/index.html @@ -19,6 +19,6 @@
- + diff --git a/index.tsx b/index.tsx deleted file mode 100644 index b94d026..0000000 --- a/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { render } from 'solid-js/web' -import { Router } from '@solidjs/router' - -import routes from './src/routers/router' - -const root = document.getElementById('root') as HTMLElement - -render(() => {routes}, root) diff --git a/src/app.tsx b/src/app.tsx new file mode 100644 index 0000000..f9a346d --- /dev/null +++ b/src/app.tsx @@ -0,0 +1,13 @@ +import { Suspense, type Component } from 'solid-js' + +const App: Component<{ children: Element }> = (props) => { + return ( + <> +
+ {props.children} +
+ + ) +} + +export default App diff --git a/src/layouts/Layout.sass b/src/index.sass similarity index 100% rename from src/layouts/Layout.sass rename to src/index.sass diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..8150d07 --- /dev/null +++ b/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(() => {props.children}}>{routes}, root) diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx deleted file mode 100644 index 68143a4..0000000 --- a/src/layouts/Layout.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import './Layout.sass' -import type { JSXElement } from 'solid-js' - -interface Props { - children: JSXElement -} - -export default (props: Props) => { - return ( - <> -
{props.children}
- - ) -} diff --git a/src/routers/router.tsx b/src/routers/router.tsx deleted file mode 100644 index 4c1f7d1..0000000 --- a/src/routers/router.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { lazy } from 'solid-js' -import Layout from '../layouts/Layout.tsx' - -const routes = [ - { - path: '/', - component: (props: any) => {props.children}, - 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: () =>
404
, - }, -] - -export default routes diff --git a/src/routes.tsx b/src/routes.tsx new file mode 100644 index 0000000..35d4668 --- /dev/null +++ b/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')), + }, +] diff --git a/tsconfig.app.json b/tsconfig.app.json index da15d3f..d9f1596 100644 --- a/tsconfig.app.json +++ b/tsconfig.app.json @@ -24,5 +24,5 @@ "noFallthroughCasesInSwitch": true, "noUncheckedSideEffectImports": true }, - "include": ["src", "index.tsx"] + "include": ["src", "src/index.tsx"] }