omi-router

To help you get started, we've collected the most common ways that omi-router is being used within popular public projects.

AlloyTeam / omi-cli / template / spa / src / component / hello / index.js View on Github

install(){
        OmiRouter.init({
            routes: [
                {path: '/about', component: () => import("../intro/index.js")}
            ],
            renderTo: "#view",
            defaultRoute: '/',
            root: this
        })
    }

View more ways to use omi-router

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 class="text-gray-700 text-xl font-bold flex items-center gap-2" href="#/">
                <img src="https://omi.cdn-go.cn/admin/latest/home/omi.svg" class="w-8">
                OMI-Router
              </a>
            </div>
            <div class="hidden md:flex items-center space-x-4">
              <a class="{classNames({" href="#/">
                Home
              </a>
              <a class="{classNames({" href="#/other-page">
                Other Page
              </a>
              <a class="{classNames({" href="#/about">
                About
              </a>
              <a href="https://github.com/Tencent/omi/tree/master/packages/omi-router">
                Github
              </a>
            </div>
          </div>
        </nav>
      </header>
      <div class="text-center pt-56 text-6xl">{children}</div>
    
  )
}

// Sub Layout
const SubLayout = ({ children }: { children: VNode }) =&gt; (
  &lt;&gt;
    <h1>Sub Layout</h1>
    {children}
  
)

// Routes
export const routes = [
  {
    path: '/',
    render(router: Router) {
      return (
        
          <h2>Home</h2>
        
      )
    },
  },
  {
    path: '/about',
    render(router: Router) {
      return (
        
          
            <h2>About</h2>
          
        
      )
    },
  },
  {
    path: '/other-page',
    render(router: Router) {
      return (
        
          
            <h2>Other Page</h2>
          
        
      )
    },
  },
  {
    path: '*',
    render(router: Router) {
      return (
        
          
            <h2>404</h2>
          
        
      )
    },
  },
  {
    path: '/user/:id/profile',
    render(router: Router) {
      // router.params.id
    },
  },
  {
    path: '/before-enter/test',
    beforeEnter: (to: string, from: string) =&gt; {
      // 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',
  hash: false
})

Work with omi-suspense

npm i omi-router omi-suspense

...
{
  path: '/user/:id/profile',
  render(router: Router) {
    return (
      
        
           {
              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>
            
              
            
          
        
      
    )
  }
},
...

License

MIT © OMI