Fixed layout and routing

This commit is contained in:
Patrick Alvin Alcala 2025-09-24 17:55:40 +08:00
parent c57727e20a
commit ddff738d2e
5 changed files with 54 additions and 26 deletions

View file

@ -18,6 +18,6 @@
<body class="body"> <body class="body">
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/layouts/Layout.tsx"></script> <script type="module" src="./index.tsx"></script>
</body> </body>
</html> </html>

8
index.tsx Normal file
View file

@ -0,0 +1,8 @@
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'
import routes from './src/routers/router'
const root = document.getElementById('root')
render(() => <Router>{routes}</Router>, root!)

View file

@ -1,27 +1,14 @@
import './Layout.sass' import './Layout.sass'
import { lazy } from 'solid-js' import type { JSXElement } from 'solid-js'
import { render } from 'solid-js/web'
import { Router } from '@solidjs/router'
const root = document.getElementById('root') interface Props {
children: JSXElement
}
const routes = [ export default (props: Props) => {
{ return (
path: '/', <>
component: lazy(() => import('../pages/IndexPage/Index.tsx')), <div class="layout">{props.children}</div>
}, </>
{ )
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!)

33
src/routers/router.tsx Normal file
View file

@ -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

View file

@ -24,5 +24,5 @@
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true "noUncheckedSideEffectImports": true
}, },
"include": ["src"] "include": ["src", "index.tsx"]
} }