React HashRouter导航栏点击后页面不刷新问题求助

核心问题 #

你的导航组件MainMenu放在了HashRouter的外部，导致Link组件不在路由上下文环境中。点击Link时虽然会修改浏览器URL，但路由系统无法监听这个跳转行为，因此不会自动切换页面内容，必须手动刷新才能生效。

具体修改步骤 #

1. 调整根组件的路由包裹范围
   把MainMenu移到HashRouter内部，让它处于路由上下文之中：

root.render(
  <React.StrictMode>
    <HashRouter>
      {/* 将MainMenu移入HashRouter内部 */}
      <MainMenu items={menuItems} />
      <Routes>
        {/* 合并index和path属性，简化写法 */}
        <Route path='/' element={<HomePage />} />
        <Route path="/contact" element={<ContactPage />} />
        <Route path="/user/login" element={<UserLoginPage />} />
     </Routes>
    </HashRouter>
  </React.StrictMode>
);

2. 清理MainMenu组件的多余导入
   删除MainMenu中不需要的HashRouter导入，只保留Link：

// 原代码
// import { HashRouter , Link } from 'react-router-dom';
// 修改后
import { Link } from 'react-router-dom';

3. 修复MainMenu的标签闭合问题
   补全Container标签的闭合（原代码中缺少闭合标签）：

render() {
  return (
    <Container>
      {this.state.items.map(this.makeNewLink)}
    </Container> {/* 补充闭合标签 */}
  );
}

原理说明 #

React Router的所有路由相关组件（Link、Routes、Route等）都需要在同一个路由提供者（如HashRouter）的上下文环境下工作，这样它们才能共享路由状态。当Link在路由上下文内时，点击它会触发路由系统的状态更新，进而自动匹配对应的Route组件并渲染页面内容。

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