草庐IT

手撸Router，还要啥Router框架？react-router/vue-router躺一边去

EluxJS 2023-03-28 原文

有没有发现，在大家使用React/Vue的时候，总离不开一个小尾巴，到哪都得带着他，那就是react-router/vue-router，而基于它们的第三方框架又出现很多个性化约定和扩展，比如nuxtjs/nextjs/umijs都纷纷推出自己的路由方案。

有没有想过，其实你可以完全摆脱他们都束缚？而且并不复杂，下面听我来分析分析：

State可以控制一切UI

首先React/Vue都是基于MVVM架构，State可以决定Component的显示与否，而且很简单：

// jsx
{show? <SubUI /> : null}

// vue
<SubUI v-if="show" />

也可以根据State来动态显示组件：

<component :is="componentA"></component>

控制UI的方法有很多，我就不例举了，总之State才是掌控UI的大脑中枢。

将URL映射为State

路由的作用，无非就是根据Url来控制UI展示，那么你只需要将Url映射成为State，不就达到目的了？

Url主要分2部分，pathname和query，有很多第三方库提供解析它们的方法，比如：

  • pathname解析：path-to-regexp：
    const regexp = pathToRegexp("/:foo/:bar");
regexp.exec("/test/route");
    具体用法大家看看官方文档就可以了，很简单...
  • query解析：query其实很灵活，没有规定非得用什么格式，最简单的你直接用JSON.stringify将序列化后的字符串作为query也可以，如果你想遵循常用的格式，你可以使用：query-string 或者 qs
    queryString.parse(location.search)

好了，现在你可以拿到解析Url后的数据，然后把它们转换成你想要的State，存放在全局Store中就可以了，比如你定义一个Url：

/member/list/3?uname=lily

//提取路由信息
getRouteParams(): RouteParams {
    const query = queryString.parse(location.search);
    const [, curModule='', curView='', id=''] = pathToRegexp('/:curModule/:curView/:id')
    .exec(location.pathname) || [];
    if (curView === 'list') {
       //如果是列表，ID表示当前页码
       return {...query, pageCurrent: id, curView}
    } else if(curView === 'detail') {
       return {...query, id, curView}
    }
}

然后在UI中拿到这几个State（可通过Redux或Vuex）：

const Component = ({curView}) => {
  return (
    <>
      {curView === 'list' && <List />}
      {curView === 'detail' &&  <Detail />}
    </>
  );
};

发起路由跳转

基于pushState和replaceState，封装一下就可以了：

window.history.pushState(null, '', url);
window.history.replaceState(null, '', url);

const Link = ({url, action, ...props}) => {
  const onClick = (event: MouseEvent) => {
    event.preventDefault();
    window.history[`${action}State`](null, '', url);
  }
  return <a onClick={onClick} {...props} />;
}

监听路由变化

监听popstate事件就行了：

window.addEventListener('popstate',() => {
  //解析Url并更新Store
  //...
});

手撸的好处

  • UI渲染更纯粹，将UI的生杀大权牢牢掌握在State手中，UI = render(state)，路由和其它因子都被挡在外围，当作一种影响State的副作用之一。

  • 灵活性更高，你可以把URL映射成为任何State，从而控制任何State能控制的东西，比如用Url来控制一个按钮的启用与禁用，弹窗的弹出与关闭等等。
  • 不依赖各种第三方框架，不用学习它们，也不受它们的约束。
  • UI和Router之间没有直接绑定，而是通过State映射，这意味着如果产品优化、路由格式变动，改动的只是映射，而不用动到View和State，这样更松散。

实际案例

以上所说只是一个大体思路，真正要用得方便，还得做一些细节的封装和改动，这里提供一个自己的开源项目供大家参考，在线预览：http://admin-react-antd.eluxjs.com/

该项目中，没有使用任何第三方Router框架，全凭自己撸，那感觉也挺好的...???

RouterroutercodeStatepreVue

有关手撸Router，还要啥Router框架？react-router/vue-router躺一边去的更多相关文章

  1. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  2. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  3. ruby - sinatra 框架的 MVC 模式 - 2

    我想开始使用“Sinatra”框架进行编码，但我找不到该框架的“MVC”模式。是“MVC-Sinatra”模式或框架吗？ 最佳答案 您可能想查看Padrino这是一个围绕Sinatra构建的框架，可为您的项目提供更“类似Rails”的感觉，但没有那么多隐藏的魔法。这是使用Sinatra可以做什么的一个很好的例子。虽然如果您需要开始使用这很好，但我个人建议您将它用作学习工具，以对您来说最有意义的方式使用Sinatra构建您自己的应用程序。写一些测试/期望，写一些代码，通过测试-重复:)至于ORM，你还应该结帐Sequel其中(imho

  4. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  5. (附源码)vue3.0＋.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图：一.整体介绍　　介绍SignalR一种通讯模型Hub(中心模型，或者叫集线器模型)，调用这个模型写好的方法，去发送消息。　　内容有：　　　　①：Hub模型的方法介绍　　　　②：服务器端代码介绍　　　　③：前端vue3安装并调用后端方法　　　　④：聊天室样例整体流程：1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过，signalR内置方法.invoke()  去请求接口3、监听接受方法（渲染消息）通过new signalR.HubConnectionBuilder().on

  6. ruby-on-rails - 正确了解 Rails 框架的最佳方式是什么？ - 2

    按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visitthehelpcenter指导。关闭10年前。我一直在Rails上做两个项目，它们运行良好，但在这个过程中重新发明了轮子，自来水(和热水)和止痛药，正如我随后了解到的那样，这些已经存在于框架中。那么基本上，正确了解框架中所有智能部分的最佳方法是什么，这将节省时间而不是自己构建已经实现的功能？从第1页开始阅读文档？是否有公开所有内容的特定示例应用程序？一个特定的开源项目？所有的rails交通？还是完全

  7. ruby - 自动将院子文档框架添加到现有的 Rails 遗留代码中 - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题，以便用事实和引用来回答。关闭4年前。Improvethisquestion我希望能够将模板化的YARD文档样式注释插入到我现有的Rails遗留应用程序中。目前它的评论很少。我想要具有指定参数的类header和方法header(通过从我假定的方法签名中提取)和返回值的占位符。在PHP代码中，我有一些工具可以检查代码并在适当的位置创建插入到代码中的文档header注释。在带有Ducktyping等的Ruby中，我确信诸如@params等类型之类

  8. ruby-on-rails - 具有六边形架构和 DCI 模式的框架和数据库适配器 - 2

    我尝试用Ruby设计一个基于Web的应用程序。我开发了一个简单的核心应用程序，在没有框架和数据库的情况下在六边形架构中实现DCI范例。核心六边形中有小六边形和网络，数据库，日志等适配器。每个六边形都在没有数据库和框架的情况下自行运行。在这种方法中，我如何提供与数据库模型和实体类的关系作为独立于数据库的关系。我想在将来将框架从Rails更改为Sinatra或数据库。事实上，我如何在这个核心Hexagon中实现完全隔离的rails和mongodb的数据库适配器或框架适配器。有什么想法吗？ 最佳答案 ROM呢？(Ruby对象映射器)。还有

  9. python - Ruby 是否有相当于 Python 的扭曲框架作为网络抽象层？ - 2

    据我了解，Python的扭曲框架为网络通信提供了更高级别的抽象(？)。我正在寻找在Rails应用程序中使用与twisted等效的Ruby。 最佳答案 看看EventMachine.它不像Twisted那样广泛，但它是围绕事件驱动网络编程的相同概念构建的。 关于python-Ruby是否有相当于Python的扭曲框架作为网络抽象层？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/9

  10. ruby - 单个 EventMachine react 器中的多个服务器 - 2

    是否可以在单个事件机器中运行多个服务器？我的意思是，多个服务可以由一个客户端连接同时使用。例如，登录服务器对用户进行身份验证，然后用户可以同时使用聊天室和简单的游戏，例如带有单个客户端套接字的跳棋？或者我是否需要为每个服务使用多个事件机器react器？ 最佳答案 我试过了，它正在工作:#!/usr/bin/envrubyrequire'eventmachine'moduleEchoServerdefpost_initputs"--someoneconnectedtotheechoserver!"enddefreceive_datad

随机推荐