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

2022-05-23 16:59:26 +08:00
 lblblong

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

oh-router

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

特性:

安装和使用

在 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)
}
1888 次点击
所在节点    前端开发
9 条回复
shilianmlxg
2022-05-23 17:38:16 +08:00
第一个 start

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

比如 mobx + router-query
lblblong
2022-05-23 18:02:21 +08:00
@shilianmlxg 哈哈哈哈感谢感谢,不得不说有眼光!用了 oh-router 会发现路由从未如此简单
Torpedo
2022-05-23 18:07:13 +08:00
"react-router 必须要在组件创建之后才提供导航方法" ,这个没太理解。react-router 不创建组建也能调用吧
lblblong
2022-05-23 18:14:52 +08:00
@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
2022-05-23 20:17:06 +08:00
@lblblong react-router 上你用 create 出来的 history 也可以直接调用吧。
felixin
2022-05-23 20:23:16 +08:00
建议参考下 router5 给路由加上 name
lblblong
2022-05-23 22:19:55 +08:00
@Torpedo 呀。。确实是,看来不能作为卖点之一了,改下文档。。
lblblong
2022-05-23 22:41:57 +08:00
@felixin 是类似 vue-router 的命名路由吗
sjhhjx0122
2022-06-14 14:56:21 +08:00
有兴趣支持一下 webcomponent 吗~最近玩 webcomponent 发现没一个好用的路由库

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/854743

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX