React Router v5（HashRouter）中使用模态路由时如何防止列表组件重新挂载？

我完全理解你的困扰——本来想通过「模态路由」的模式既保留URL的可分享性，又不丢失列表的滚动位置和状态，结果列表组件却反复卸载重装，这完全违背了初衷。咱们一步步来拆解问题，找到解决办法。

一、为什么列表组件会重新挂载？ #

你遇到的核心问题，本质是React Router对location的识别逻辑+HashRouter的特性共同导致的：

1. Location对象引用变化触发组件卸载
   当你点击行调用history.push后，虽然<Switch>使用了background || location（也就是原来的/coupons路径），但这个background是来自新location的state中的对象引用——和之前<Switch>使用的原始location对象是两个不同的引用。
   在React Router v5中，<Route>组件会比较前后传入的location对象，即使路径完全相同，只要对象引用不同，就可能触发组件实例的销毁与重建（也就是你看到的unmount+mount）。

2. HashRouter缺少location.key的标识
   BrowserRouter会为每个导航生成唯一的location.key，用来标识同一个导航上下文；但HashRouter在v5版本中不会自动生成这个key。
   没有key的话，React Router无法准确判断「当前的background location和之前的列表页location属于同一个上下文」，进一步加剧了组件重新挂载的问题。

3. Route的key配置可能雪上加霜
   你用idx作为<Route>的key，虽然一般情况下没问题，但当路由数组的顺序或内容有变动（哪怕是location变化导致的重新渲染），React可能误判为组件需要重建，这也可能是诱因之一。

二、是否是HashRouter的锅？ #

是的，但不全是：

• HashRouter的location.key缺失是重要原因，但核心还是React Router v5对location对象的比较逻辑——如果是BrowserRouter，因为有唯一的key，即使location对象引用不同，React Router也能识别出是同一个导航上下文，从而复用组件实例。
• 但你的路由配置和模态路由的实现逻辑本身是正确的，只是HashRouter的特性放大了问题。

三、解决办法：从根源阻止组件重新挂载 #

下面是几个针对性的解决方案，按优先级排序：

1. 为HashRouter手动添加location.key（最推荐） #

既然HashRouter默认不生成key，我们可以手动扩展history对象，为每个导航添加唯一标识：

import { Router } from 'react-router-dom';
import { createHashHistory } from 'history';

// 创建自定义HashHistory
const history = createHashHistory();
let keyCounter = 0;

// 重写push方法，添加唯一key
const originalPush = history.push;
history.push = (...args) => {
  const result = originalPush(...args);
  // 为当前location添加key（如果没有的话）
  if (!history.location.key) {
    history.location.key = `hash-${keyCounter++}`;
  }
  return result;
};

// 同样重写replace方法
const originalReplace = history.replace;
history.replace = (...args) => {
  const result = originalReplace(...args);
  if (!history.location.key) {
    history.location.key = `hash-${keyCounter++}`;
  }
  return result;
};

// 用自定义Router代替HashRouter
ReactDOM.render(
  <Router history={history}>
    <App />
  </Router>,
  document.getElementById('root')
);

这样React Router就能通过key识别同一个导航上下文，即使location对象引用变化，也会复用组件实例，不会卸载列表。

2. 优化Route的key配置 #

把<Route>的key从idx改成route.path，确保每个路由的key是唯一且稳定的，避免React因为key的变化误判组件需要重建：

// 原来的代码
<Route
  key={idx}
  path={route.path}
  exact={route.exact}
  render={(props) => <route.component {...props} />}
/>

// 修改后
<Route
  key={route.path} // 用路由路径作为key，更稳定
  path={route.path}
  exact={route.exact}
  render={(props) => <route.component {...props} />}
/>

3. 用React.memo包裹列表组件（辅助优化） #

如果是函数组件，用React.memo包裹；如果是类组件，改成PureComponent，让组件在props没有实质变化时不重新渲染（虽然不能直接阻止卸载，但能配合前面的方法强化效果）：

// 类组件的话
class Coupons extends React.PureComponent {
  // ... 组件代码
}

// 函数组件+withRouter的自定义比较逻辑
const Coupons = React.memo((props) => {
  // ... 组件代码
}, (prevProps, nextProps) => {
  // 自定义比较逻辑：只要pathname相同，就认为props无变化
  return prevProps.location.pathname === nextProps.location.pathname;
});
export default withRouter(Coupons);

4. 备选：保存并恢复滚动位置（兜底方案） #

如果上面的方法都不生效，可以在列表组件中手动保存滚动位置，在挂载时恢复：

class Coupons extends React.Component {
  constructor(props) {
    super(props);
    this.scrollPosition = 0;
  }

  componentDidMount() {
    // 恢复滚动位置
    window.scrollTo(0, this.scrollPosition);
  }

  componentWillUnmount() {
    // 保存滚动位置
    this.scrollPosition = window.pageYOffset;
  }

  // ... 其他代码
}

不过这是兜底方案，不如前面的方法从根源解决问题。

四、验证效果 #

修改后，当你点击优惠券行：

1. URL会变成/coupons/xxx，符合预期；
2. 列表组件不会卸载，滚动位置和内部状态完全保留；
3. 模态组件正常渲染，关闭后返回列表页无任何状态丢失。

备注：内容来源于stack exchange，提问作者Varikash Nikolay