前端的朋友们，我整了个路由库，挺好用的，快来看看！

[lblblong]

我就直接复制文档了，喜欢的话给点个星星哈！

oh-router

路由一直是前端开发的重要组成部分，主流框架都有官方或社区的提供的路由支持，比如 vue-router 和 react-router，但它们都与框架深度绑定而无法共用。oh-router 将核心功能与框架解绑，以此在不同的框架之间提供一致的 API 接口。

特性：

• 在代码的任何位置调用路由导航方法
  • react-router 必须要在组件创建之后才提供导航方法
  • oh-router 的核心功能是与框架解绑的，所以可以在任何位置调用 oh-router 提供的导航方法
• 开箱即用的路由中间件功能
• 与 react-router 使用体验一致的 路由匹配 和 hooks
  • 路由匹配 和 hooks 直接基于 react-router v6
• 目前支持 Vue 和 React

安装和使用

在 React 中使用

安装依赖

$ npm install --save oh-router oh-router-react

下面是一个结合 React 最基本的使用案例：在 StackBlitz 中打开

import { Router } from 'oh-router'
import { RouterView, Link } from 'oh-router-react'
import ReactDOM from 'react-dom/client'

const router = new Router({
  routes: [
    {
      path: '/',
      element: () => (
        <div>
          <div>Home</div>
          <Link to="/about">to About</Link>
        </div>
      ),
    },
    {
      path: '/about',
      element: () => (
        <div>
          <div>About</div>
          <Link to="/">to Home</Link>
        </div>
      ),
    },
  ],
})

ReactDOM.createRoot(document.getElementById('root')!).render(
  <RouterView router={router} />
)

在 Vue 中使用

安装依赖

$ npm install --save oh-router oh-router-vue

下面是一个结合 Vue 最基本的使用案例：在 StackBlitz 中打开

<div id="app">
  <router-view />
</div>

<script>
  import { Router } from 'oh-router'
  import { installForVue } from 'oh-router-vue'
  import { createApp } from 'vue'

  const router = new Router({
    routes: [
      {
        path: '/',
        element: {
          template: `<div>
          <div>Home</div>
          <router-link to="/about">to About</router-link>
        </div`,
        },
      },
      {
        path: '/about',
        element: {
          template: `<div>
          <div>About</div>
          <router-link to="/">to Home</router-link>
        </div`,
        },
      },
    ],
  })

  const app = createApp({})
  app.use(installForVue(router))
  app.mount('#app')
</script>

不在框架中使用

在 StackBlitz 中打开

import Router from 'oh-router'

const app = document.querySelector<HTMLDivElement>('#app')!

const routes = [
  {
    path: '/',
    element: `<div>Home</div>
    <div>
      <button onclick="to('/libs')">libs</button>
      <button onclick="to('/languages')">languages</button>
    </div>`,
    children: [
      {
        path: '/libs',
        element: `<ul>
          <li onclick="to('/libs/react')"><button>React</button></li>
          <li onclick="to('/libs/vue')"><button>Vue</button></li>
        <ul/>`,
      },
      {
        path: '/libs/:name',
        element: `Lib: `,
        name: 'lib-detail',
      },
      {
        path: '/languages',
        element: `<ul><li>Java</li><li>Go</li><ul/>`,
      },
    ],
  },
  {
    path: '*',
    element: '404',
  },
]

const router = new Router({ routes })
  .addLocationListener((location) => {
    let content = location.matched.map(({ route }) => route.element).join('\n')
    const lastRoute = location.matched[location.matched.length - 1]

    if (lastRoute.route.name === 'lib-detail') {
      content += lastRoute.params.name
    }

    app.innerHTML = content
  })
  .start()

window.to = function to(path: string) {
  router.navigate(path)
}

[shilianmlxg]

第一个 start

膜拜大佬,之前的觉得最复杂的就是 router 了

比如 mobx + router-query

[lblblong]

@shilianmlxg 哈哈哈哈感谢感谢，不得不说有眼光！用了 oh-router 会发现路由从未如此简单

[Torpedo]

"react-router 必须要在组件创建之后才提供导航方法" ,这个没太理解。react-router 不创建组建也能调用吧

[lblblong]

@Torpedo react-router 提供的 Link 和 useNavigate 都得基于 <Router> 根组件提供的上下文才能使用，但是 oh-router 只要创建了 Router 实例之后就可以进行路由导航了，比如：

```tsx
const router = new Router(...)

// 在实例创建之后就可以导航了
router.navigate('/login')

ReactDOM.createRoot(document.getElementById('root')!).render(
<RouterView router={router} />
)
```

[Torpedo]

@lblblong react-router 上你用 create 出来的 history 也可以直接调用吧。

[felixin]

建议参考下 router5 给路由加上 name

[lblblong]

@Torpedo 呀。。确实是，看来不能作为卖点之一了，改下文档。。

[lblblong]

@felixin 是类似 vue-router 的命名路由吗

[sjhhjx0122]

有兴趣支持一下 webcomponent 吗~最近玩 webcomponent 发现没一个好用的路由库