如何实现点击Go back按钮时重置首页餐厅的选中状态？

问题原因 #

点击浏览器回退或详情页的「Go back」按钮返回首页时，React Router会复用之前渲染的首页组件实例，而非重新创建，导致首页中记录选中状态的selectedId未被重置，所以餐厅仍显示为「selected」；而手动输入首页URL时，会强制重新加载组件，状态被初始化，因此显示正常。

修复方案 #

在首页组件中监听路由路径变化，当回到首页时重置选中状态：

1. 引入useLocation钩子：

import { useLocation } from 'react-router-dom';

2. 在组件内添加监听逻辑：

const location = useLocation();

useEffect(() => {
  // 当路径回到首页时，重置选中ID
  if (location.pathname === '/') {
    setSelectedId(null);
  }
}, [location.pathname, setSelectedId]);

这段代码会在路由路径变化时触发，一旦回到首页就清空选中状态，确保餐厅显示为「not selected」。

相关技术概念 #

这类问题属于路由状态同步与组件复用范畴，涉及以下核心概念：

• 浏览器历史栈（History Stack）：浏览器维护的页面访问历史，回退操作本质是弹出栈顶记录，React Router基于此实现路由跳转。
• React Router组件复用机制：React Router在路由切换时，会尽可能复用已挂载的组件以提升性能，这会导致组件内部状态不会自动重置。
• popstate事件：浏览器回退/前进时触发的原生事件，React Router通过监听该事件更新路由状态，但不会主动重置组件内部状态。

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