React修改URL打开模态框 主页面刷新选中状态丢失问题

选中状态丢失的核心原因是路由匹配时触发了AccountDetails组件的完整卸载重挂载：

• 你给两个路由都配置了exact={true}，分别匹配发票列表页和changelog模态框页，两个平级路由虽然都渲染AccountDetails组件，但React路由会将其识别为两个完全独立的组件实例。URL切换时旧的AccountDetails实例会被直接卸载，再挂载新的实例，组件内部所有本地状态（包括PrimeReact DataTable存储的选中项）都会被重置清空。
• 你之前尝试的history.push/history.replace/window.history.replaceState都只是修改路由栈的实现方式，解决不了组件重挂载的本质问题，所以效果完全一致。
• 额外提一句，你changelog路由的权限判断存在逻辑bug：[userRoles.userAudit.toString()] || [userRoles.admin] 这个写法永远只会返回第一个数组，admin角色实际不会被纳入权限校验范围。

方案1：路由嵌套（推荐，符合模态框URL的常规实现逻辑） #

把changelog路由改为AccountDetails的嵌套子路由，不要让两个平级路由独立渲染AccountDetails，从根源上避免组件重挂载：

1. 调整顶层路由配置，移除changelog路由的独立AccountDetails渲染逻辑，同时去掉列表页路由的exact限制，修复权限配置错误：

<ProtectedRoute
  path="/customers/:customerCode"
  component={(props: any) => <AccountDetails {...props} />}
  authority={[userRoles.user, userRoles.userAudit.toString(), userRoles.admin]}
  feature={"Collection module"}
  rootStore={this.props.rootStore}
/>

2. 在AccountDetails组件内部增加嵌套子路由，匹配到changelog路径时直接弹出模态框。这种实现下AccountDetails作为父路由组件全程不会卸载，DataTable的选中状态会完整保留：

// AccountDetails类组件render方法内
render() {
  const { match } = this.props;
  return (
    <div>
      {/* 原有页面内容、InvoiceTable组件保持原有逻辑正常渲染 */}
      <InvoiceTable /* 原有传入props保持不变 */ />

      {/* 嵌套子路由匹配到路径时展示模态框 */}
      <Route
        path={`${match.path}/:number/changelog`}
        render={(routeProps) => (
          <HistoryModal
            visible={true}
            invoiceNumber={routeProps.match.params.number}
            onClose={() => this.props.history.push(match.url)}
          />
        )}
      />
    </div>
  )
}

3. 修复原有跳转逻辑的硬编码问题，把动态发票号正确拼入路径：

openHistoryModal = (rowData, e) => {
  e.stopPropagation();
  this.props.history.push(`/customers/${customerCode}/${rowData.invoiceNumber}/changelog`);
};

方案2：状态提升（适配暂时无法调整路由结构的场景） #

如果短期内不想改动现有路由嵌套关系，可以把DataTable的选中项状态从InvoiceTable/AccountDetails组件中提升，存储到不会随路由切换卸载的层级：

• 直接复用项目已有的rootStore全局状态，在对应业务store中新增selectedInvoiceRows字段存储选中项
• 也可以将选中状态存到更高层级、路由切换时不会卸载的父组件中
• 每次DataTable选中项变化时同步更新上层存储的状态，AccountDetails组件重挂载时直接从该存储中读取值初始化表格选中态即可。

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