Install

npm i omi-router

Usage

import{VNode,classNames}from'omi'import{Router}from'../../src/router'// Basic LayoutconstLayout=({ children, router}:{children:VNode|VNode[];router?:Router})=>{return(<><headerclass="bg-white shadow"><navclass="container mx-auto px-6 py-3"><divclass="flex items-center justify-between"><div><ahref="#/"class="text-gray-700 text-xl font-bold flex items-center gap-2"><imgclass="w-8"src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"></img>                OMI-Router</a></div><divclass="hidden md:flex items-center space-x-4"><ahref="#/"class={classNames({'text-green-500':router?.currentRoute?.path==='/'||router?.currentRoute?.path==='',})}>                Home</a><ahref="#/other-page"class={classNames({'text-green-500':router?.currentRoute?.path==='/other-page',})}>                Other Page</a><ahref="#/about"class={classNames({'text-green-500':router?.currentRoute?.path==='/about',})}>                About</a><ahref="https://github.com/Tencent/omi/tree/master/packages/omi-router"target='_blank'>                Github</a></div></div></nav></header><divclass="text-center pt-56 text-6xl">{children}</div></>)}// Sub LayoutconstSubLayout=({ children}:{children:VNode})=>(<><h1>Sub Layout</h1>{children}</>)// Routesexportconstroutes=[{path:'/',render(router:Router){return(<Layoutrouter={router}><h2>Home</h2></Layout>)},},{path:'/about',render(router:Router){return(<Layoutrouter={router}><SubLayout><h2>About</h2></SubLayout></Layout>)},},{path:'/other-page',render(router:Router){return(<Layoutrouter={router}><SubLayout><h2>Other Page</h2></SubLayout></Layout>)},},{path:'*',render(router:Router){return(<Layoutrouter={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 navigationreturnfalse},}]

import{routes}from'./routes'import{Router}from'omi-router'// import global tailwindimport'../tailwind'constrouter=newRouter({  routes,renderTo:'body',hash:false})

Work with omi-suspense

npm i omi-router omi-suspense

...{path:'/user/:id/profile',render(router:Router){return(<Layoutrouter={router}><SubLayout><o-suspenseimports={[import('./components/user-info'),import('./components/user-profile'),]}data={async()=>{returnawaitfetchUserProfile(router?.params.idasstring)}}onDataLoaded={(event:CustomEvent)=>{userProfile.value=event.detail}}><divslot="pending">Loading user profile...</div><divslot="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