4.1.7 • Published 3 months ago
omi-router v4.1.7
omi-router
Router for Omi SPA
Install
npm i omi-router
Usage
routes.tsx:
import { VNode, classNames } from 'omi'
import { Router } from '../../src/router'
// Basic Layout
const Layout = ({ children, router }: { children: VNode | VNode[]; router?: Router }) => {
return (
<>
<header class="bg-white shadow">
<nav class="container mx-auto px-6 py-3">
<div class="flex items-center justify-between">
<div>
<a href="#/" class="text-gray-700 text-xl font-bold flex items-center gap-2">
<img class="w-8" src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"></img>
OMI-Router
</a>
</div>
<div class="hidden md:flex items-center space-x-4">
<a
href="#/"
class={classNames({
'text-green-500': router?.currentRoute?.path === '/' || router?.currentRoute?.path === '',
})}
>
Home
</a>
<a
href="#/other-page"
class={classNames({
'text-green-500': router?.currentRoute?.path === '/other-page',
})}
>
Other Page
</a>
<a
href="#/about"
class={classNames({
'text-green-500': router?.currentRoute?.path === '/about',
})}
>
About
</a>
<a
href="https://github.com/Tencent/omi/tree/master/packages/omi-router"
target='_blank'
>
Github
</a>
</div>
</div>
</nav>
</header>
<div class="text-center pt-56 text-6xl">{children}</div>
</>
)
}
// Sub Layout
const SubLayout = ({ children }: { children: VNode }) => (
<>
<h1>Sub Layout</h1>
{children}
</>
)
// Routes
export const routes = [
{
path: '/',
render(router: Router) {
return (
<Layout router={router}>
<h2>Home</h2>
</Layout>
)
},
},
{
path: '/about',
render(router: Router) {
return (
<Layout router={router}>
<SubLayout>
<h2>About</h2>
</SubLayout>
</Layout>
)
},
},
{
path: '/other-page',
render(router: Router) {
return (
<Layout router={router}>
<SubLayout>
<h2>Other Page</h2>
</SubLayout>
</Layout>
)
},
},
{
path: '*',
render(router: Router) {
return (
<Layout router={router}>
<SubLayout>
<h2>404</h2>
</SubLayout>
</Layout>
)
},
},
{
path: '/user/:id/profile',
render(router: Router) {
// router.params.id
},
},
{
path: '/before-enter/test',
beforeEnter: (to: string, from: string) => {
// reject the navigation
return false
},
}
]
main.tsx:
import { routes } from './routes'
import { Router} from 'omi-router'
// import global tailwind
import '../tailwind'
const router = new Router({
routes,
renderTo: 'body'
})
Work with omi-suspense
npm i omi-router omi-suspense
...
{
path: '/user/:id/profile',
render(router: Router) {
return (
<Layout router={router}>
<SubLayout>
<o-suspense
imports={[
import('./components/user-info'),
import('./components/user-profile'),
]}
data={async () => {
return await fetchUserProfile(router?.params.id as string)
}}
onDataLoaded={(event: CustomEvent) => {
userProfile.value = event.detail
}}
>
<div slot="pending">Loading user profile...</div>
<div slot="fallback">Sorry, we are unable to load the user profile at the moment. Please try again later.</div>
<user-info>
<user-profile></user-profile>
</user-info>
</o-suspense>
</SubLayout>
</Layout>
)
}
},
...
License
MIT © OMI
4.1.7
3 months ago
4.1.6
4 months ago
4.1.5
4 months ago
4.1.4
4 months ago
4.1.3
5 months ago
4.1.0
6 months ago
4.0.1
7 months ago
4.0.0
7 months ago
4.1.2
5 months ago
4.0.3
7 months ago
4.1.1
6 months ago
4.0.2
7 months ago
3.0.4
2 years ago
3.0.3
2 years ago
3.0.5
2 years ago
3.0.2
3 years ago
3.0.1
3 years ago
3.0.0
3 years ago
2.1.0
4 years ago
2.0.11
5 years ago
2.0.10
5 years ago
2.0.9
5 years ago
2.0.8
5 years ago
2.0.7
5 years ago
2.0.6
5 years ago
2.0.5
5 years ago
2.0.4
6 years ago
2.0.3
6 years ago
2.0.2
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.0.0
6 years ago
0.3.3
7 years ago
0.3.2
7 years ago
0.3.1
7 years ago
0.3.0
7 years ago
0.2.3
7 years ago
0.2.2
7 years ago
0.2.1
7 years ago
0.2.0
7 years ago
0.1.3
7 years ago
0.1.2
7 years ago
0.1.1
7 years ago
0.1.0
7 years ago
0.0.0
7 years ago