Fixed routing

This commit is contained in:
Patrick Alvin Alcala 2025-09-25 09:22:32 +08:00
parent 9f60c27b60
commit a271bdc64e
9 changed files with 55 additions and 57 deletions

View file

@ -19,6 +19,6 @@
<body class="body">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="./index.tsx"></script>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

View file

@ -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(() => <Router>{routes}</Router>, root)

13
src/app.tsx Normal file
View file

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

13
src/index.tsx Normal file
View file

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

View file

@ -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>
</>
)
}

View file

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

27
src/routes.tsx Normal file
View file

@ -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')),
},
]

View file

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