Mobx 6迁移后集成mobx-router5时observable失效、路由变更组件不重渲染

数据老陈

2026-10-27

问题核心成因

makeObservable调用参数不完整，直接导致可观测绑定失效：MobX 6 明确要求，手动调用makeObservable完成类实例绑定时，必须在第二个参数中显式列出所有需要观测的字段、计算值、动作的规则。你当前的实现仅传了this作为参数，等于让MobX跳过所有自定义的观测配置，之前写的@observable装饰器完全没有生效，routerStore5字段本质是普通实例字段，根本不具备可观测能力。
代码执行顺序不符合MobX 6的强制要求：哪怕补齐了makeObservable的参数，调用时机也必须早于所有实例字段的赋值操作。你当前是完成了路由初始化、插件挂载等操作后才调用makeObservable，这种顺序下很容易出现代理绑定和实际赋值的对象不匹配的问题，导致深层状态变更无法被追踪。
跨版本的响应系统断层：当前使用的mobx-router5@4.3.0是适配MobX 5的旧版本，它内部创建的路由可观测状态，和当前项目使用的MobX 6依赖追踪系统不互通。就算你把路由实例挂载到了可观测字段上，因为路由内部的状态更新是通过旧版MobX的机制触发通知的，当前组件用的MobX 6 observer根本收不到对应的变更信号。
观测层级不匹配：routerStore5是默认浅观测字段，仅能感知“给该字段重新赋值新实例”的操作，无法捕获字段内部的路由路径、参数等深层属性的变更。

具体修复方案

补齐makeObservable的参数配置，把routerStore5的观测规则显式声明进去，同时调整代码执行顺序，把makeObservable的调用挪到构造函数最开头，去掉零散的@observable装饰器避免规则冲突：

import { observable, makeObservable } from 'mobx'

export class RouterStore {
  routerStore5: RouterStore5;
  constructor() {
    // 构造函数第一行完成可观测绑定，显式声明观测规则
    makeObservable(this, {
      routerStore5: observable
    })

    const routerStore = new RouterStore5();
    const router = createRouter(routes, {
      defaultRoute: 'home',
      queryParamsMode: 'loose'
    });
    router.usePlugin(mobxPlugin(routerStore));
    router.usePlugin(browserPlugin({ useHash: false }));
    // 手动将路由实例转为MobX6可观测结构，打通新旧版本的响应链路
    this.routerStore5 = observable(routerStore);
    this.routerStore5.router.start();
  }
}

检查componentConnect高阶组件的包裹顺序，保证observer是最靠近业务组件的一层，避免中间层遮挡props透传和依赖捕获：

export function componentConnect(target) {
   // 从外到内的顺序：注入全局store -> 主题适配 -> 可观测绑定
   return inject('stores')(withTheme(observer(target)));
}

验证响应链路：如果调整后仍存在路由变更不触发重渲染的问题，需要排查mobx-router5的兼容性问题——该旧版本未做MobX 6的适配，内部的观测逻辑和当前版本的追踪系统存在断层，这种情况需要替换为兼容MobX 6的路由状态实现。

内容的提问来源于stack exchange，提问作者Martin