# omi-router

> Router for Omi

Latest version **4.1.8** (published 2024-05-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install omi-router
pnpm add omi-router
yarn add omi-router
bun add omi-router
```

## Health

**Score 50/100 (C)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score; popular repo.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.1.8 |
| Published | 2024-05-21 |
| First published | 2017-03-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 24.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13273 |
| Maintainers | pasturn, dntzhang, xcatliu, dorsywang, leehyunggeun, yse |
| Keywords | omi, omiu |

## Links

- npm: https://www.npmjs.com/package/omi-router
- Repository: https://github.com/Tencent/omi
- Homepage: http://omijs.org
- Issues: https://github.com/Tencent/omi/issues/
- npm.io page: https://npm.io/package/omi-router

## Dependencies (2)

- [omi](https://npm.io/package/omi.md) latest
- [path-to-regexp](https://npm.io/package/path-to-regexp.md) ^6.2.1

## Alternatives

- [@commercetools/sync-actions](https://npm.io/package/@commercetools/sync-actions.md) — 25.1K weekly downloads
- [cwait](https://npm.io/package/cwait.md) — 21.4K weekly downloads
- [@ledgerhq/hw-app-cosmos](https://npm.io/package/@ledgerhq/hw-app-cosmos.md) — 4.2K weekly downloads
- [@financial-times/o-loading](https://npm.io/package/@financial-times/o-loading.md) — 2.8K weekly downloads
- [fa](https://npm.io/package/fa.md) — 185 weekly downloads

## Recent versions

- 4.1.8 (latest) — 2024-05-21
- 4.1.7 — 2024-01-29
- 4.1.6 — 2024-01-08
- 4.1.5 — 2024-01-08
- 4.1.4 — 2024-01-01
- 4.1.3 — 2023-12-19
- 4.1.2 — 2023-11-29
- 4.1.1 — 2023-11-09
- 4.1.0 — 2023-11-05
- 4.0.3 — 2023-10-22
- 4.0.2 — 2023-10-22
- 4.0.1 — 2023-10-22
- 4.0.0 — 2023-10-21
- 3.0.5 — 2022-08-19
- 3.0.4 — 2022-07-26
- … 31 more at https://npm.io/package/omi-router/versions

## README

## omi-router

> Router for Omi SPA

## Install

```bash
npm i omi-router
```

## Usage

routes.tsx:

```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:

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

```bash
npm i omi-router omi-suspense
```

```tsx
...
{
  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

---
_Source: https://npm.io/package/omi-router · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._