重新思考 React 路由：更简洁、更可预测的方法

Source: Dev.to

介绍 routexiz

一个轻量、现代的 React 路由器，拥有清晰的思维模型。
与其把路由视为平铺的列表，routexiz 将你的应用建模为一棵树——每个路由是一个节点，且从根到任意叶子节点只有唯一的一条路径。

// route definition
route("/", Layout, root => {
  root.route("/dashboard", Dashboard, dash => {
    dash.guard(authGuard);
    dash.middleware(trackPageView);
  });
});

好处

• 自然的嵌套布局
• 可预测的执行顺序
• 随着应用增长仍保持清晰的结构

导航

不要再猜测字符串：

navigate("/users/1");

而是这样写：

navigate("/users/:id", {
  params: { id: 1 }
});

无需字符串猜测，也不需要手动插值。

核心特性

• Suspense‑first 数据加载
• 路由级守卫（阻止导航）
• 中间件（副作用）
• 预取（悬停 + 视口）
• 带 TTL 的加载器缓存
• 每个路由的错误边界
• 内置过渡

全部无需复杂的 API。

示例：加载器与数据访问

route("/users/:id", User, {
  loader: async ({ params }) => fetchUser(params.id)
});

const data = useLoaderData(); // inside User component

简单、可预测，并能与 React Suspense 无缝配合。

设计理念

目标并非仅在原始功能上竞争，而是提升开发者体验与清晰度。

• Guard → “我们能进入吗？”
• Middleware → “在进入时执行某些操作”

这种分离让你的应用在规模扩大时依然保持整洁。

理想使用场景

• 使用嵌套布局构建仪表盘
• 干净地处理身份验证 / 权限
• 预取数据以实现更流畅的导航
• 在大型应用中保持路由逻辑的可预测性

已实现的核心组件

• 类型安全的参数
• 嵌套路由构建器
• 基础开发者工具
• React 适配器
• 文档与示例

当前状态

生态仍处于非常早期阶段。如果这种思路与你产生共鸣，我非常期待你的反馈：

• 哪些地方感觉直观？
• 哪些地方感觉不对？
• 为了生产环境使用，还缺少哪些功能？

更好的是——在一个小项目中尝试它并把它弄坏！ 😄

NPM:
Live example:

最后思考

我并不想一夜之间取代现有的路由器；我只是想探索一种更简单、更可预测的方式来处理现代 React 中的路由。如果这听起来让你感兴趣，让我们一起构建它吧。

你在当前的路由使用中，最大的痛点是什么？