V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
vilic
V2EX  ›  分享创造

类型安全的 React + MobX 路由器,支持平行路由, Boring Router 大佬们了解一下?

  •  
  •   vilic ·
    vilicvane · 2020-07-07 22:17:04 +08:00 · 1551 次点击
    这是一个创建于 1636 天前的主题,其中的信息可能已经有所发展或是发生改变。

    内部使用两年左右了,最近更新了文档。MobX 作者都点了 star 大佬你要不要也考虑点一下?

    几个关键词:

    状态优先

    Boring Router 管理了像 route.workbench.$matched 这样的路由状态,并在这些状态的基础上提供了非常薄的一层组件来响应这些对象。

    类型安全

    使用基于对象、包含类型信息的路由表示法(比如 route.workbench.task.taskId.$push({taskId: '123'})),可以方便地和 Node.js 共享路由声明。

    平行路由

    大概是独有功能。允许开发者创建一个主路由和多个平行路由,以同时描述多个路由视图。比如: /app/workbench?_sidebar=/notification 表示主路由 /app/workbench,侧边栏平行路由 /notification

    完整的生命周期钩子

    专门实现了一个 BrowserHistory 来追踪浏览器历史,可以将浏览器历史堆栈按照指定的快照恢复。于是终于可以安心使用各种生命周期钩子又不用担心破坏了导航历史。

    5 条回复    2020-07-09 15:44:00 +08:00
    liberty1900
        1
    liberty1900  
       2020-07-09 04:55:31 +08:00 via Android
    顶一个。关于路由我也有自己的看法,就是路由嵌套虽然能直观表达出父子关系,但是嵌套一多可读性太差。这个问题 callback 也有,就是著名的 callback hell 。 最后解决办法是使用 promise 的.then 语法拍平,后来有了更直观的 async/await 语法糖。
    liberty1900
        2
    liberty1900  
       2020-07-09 05:17:39 +08:00 via Android
    这个库使用了$children 属性嵌套问题就更严重,能不能提供一个 logRoute 的函数,在控制台以图形化的方式打印出 route 的结构. 类似这种
    home
    - news
    - blog
    - recent
    - archived
    - 2020
    - 2019
    about
    pricing
    - delux
    - pro
    可以选 level, 比如 level 为 1 只打印一级 route
    可以选要查看的子树,比如 logRoute("/home/blog")
    liberty1900
        3
    liberty1900  
       2020-07-09 05:18:35 +08:00 via Android
    好吧,我的空格被 v2 给 trim 了
    vilic
        4
    vilic  
    OP
       2020-07-09 15:42:41 +08:00
    @liberty1900 感觉倒是可以,目前我们自己使用的时候视情况会把一些路由声明拆出来复用,提供了一个什么也不做的 schema 函数来做这个。
    vilic
        5
    vilic  
    OP
       2020-07-09 15:44:00 +08:00
    @liberty1900 promise 那种情况也只能处理链式的,树状的一样避免不了,然而路由是树状的,就比较蛋疼。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2341 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 15:50 · PVG 23:50 · LAX 07:50 · JFK 10:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.