Fixed layout and routing
This commit is contained in:
parent
c57727e20a
commit
ddff738d2e
5 changed files with 54 additions and 26 deletions
|
|
@ -18,6 +18,6 @@
|
|||
|
||||
<body class="body">
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/layouts/Layout.tsx"></script>
|
||||
<script type="module" src="./index.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
8
index.tsx
Normal file
8
index.tsx
Normal 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!)
|
||||
|
|
@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
33
src/routers/router.tsx
Normal file
33
src/routers/router.tsx
Normal 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
|
||||
|
|
@ -24,5 +24,5 @@
|
|||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
"include": ["src", "index.tsx"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue