React中HashRouter链接无法跳转目标页面，始终停留在首页

核心问题 #

• 你使用了原生HTML的<a>标签做导航，这种标签会触发整页刷新，完全绕过HashRouter的路由管理逻辑，自然不会生成哈希路径，也无法触发组件跳转。
• 导航栏<nav>放在了<Router>组件外部，HashRouter无法管控外部元素的路由行为。

修复步骤 #

1. 从react-router-dom导入Link组件
2. 把所有原生<a>标签替换成Link组件，用to属性指定跳转路径
3. 将导航栏移动到<Router>内部，确保路由系统能控制导航行为
4. 替换key={Math.random()}为稳定的唯一标识（比如musicEvent.path），避免组件不必要的重渲染

修改后的代码示例 #

import { HashRouter as Router, Routes, Route, Link } from 'react-router-dom'; // 新增Link导入
import './style.css'
import Home from './pages/Home';
import EventPage from './pages/EventPage';
import musicEvents from './events';

function App() {
  return (
    <div className="App">
      <Router> {/* Router包裹所有路由相关内容 */}
        <nav id='header'>
          {/* 用Link替换原生a标签 */}
          <Link to="/" id='home-link'>
            <h1 id='page-title'>Concert Portfolio</h1>
          </Link>
        </nav>

        {/* 路由配置 */}
        <Routes>
          <Route path='/' element={<Home />} />
          {musicEvents.map((musicEvent) => {
            // 用musicEvent.path作为key，替代Math.random()
            return <Route path={`/${musicEvent.path}`} element={<EventPage />} key={musicEvent.path} />
          })}
        </Routes>
      </Router>
    </div>
  )
}

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