V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lblblong
V2EX  ›  前端开发

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

  •  
  •   lblblong · 2022-05-23 16:59:26 +08:00 · 1624 次点击
    这是一个创建于 674 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    oh-router

    路由一直是前端开发的重要组成部分,主流框架都有官方或社区的提供的路由支持,比如 vue-routerreact-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)
    }
    
    9 条回复    2022-06-14 14:56:21 +08:00
    shilianmlxg
        1
    shilianmlxg  
       2022-05-23 17:38:16 +08:00
    第一个 start

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

    比如 mobx + router-query
    lblblong
        2
    lblblong  
    OP
       2022-05-23 18:02:21 +08:00
    @shilianmlxg 哈哈哈哈感谢感谢,不得不说有眼光!用了 oh-router 会发现路由从未如此简单
    Torpedo
        3
    Torpedo  
       2022-05-23 18:07:13 +08:00
    "react-router 必须要在组件创建之后才提供导航方法" ,这个没太理解。react-router 不创建组建也能调用吧
    lblblong
        4
    lblblong  
    OP
       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
        5
    Torpedo  
       2022-05-23 20:17:06 +08:00
    @lblblong react-router 上你用 create 出来的 history 也可以直接调用吧。
    felixin
        6
    felixin  
       2022-05-23 20:23:16 +08:00 via Android
    建议参考下 router5 给路由加上 name
    lblblong
        7
    lblblong  
    OP
       2022-05-23 22:19:55 +08:00
    @Torpedo 呀。。确实是,看来不能作为卖点之一了,改下文档。。
    lblblong
        8
    lblblong  
    OP
       2022-05-23 22:41:57 +08:00
    @felixin 是类似 vue-router 的命名路由吗
    sjhhjx0122
        9
    sjhhjx0122  
       2022-06-14 14:56:21 +08:00
    有兴趣支持一下 webcomponent 吗~最近玩 webcomponent 发现没一个好用的路由库
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5421 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 08:40 · PVG 16:40 · LAX 01:40 · JFK 04:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.