React Router仅渲染首个路由项问题排查求助

你的代码已经定义了基础路由规则，但只显示第一个路由组件的原因很明确：

• 缺少路由切换的触发入口：当前仅配置了不同路径对应的渲染组件，但没有提供切换路径的导航元素，页面默认加载时路径为/，所以只会渲染<Hero />。
• HashRouter的作用范围不完整：导航元素需要放在HashRouter内部，才能被路由系统识别并触发路径切换。

修复后的示例代码 #

import "./App.css";
import { HashRouter, Route, Routes, Link } from "react-router-dom";
import Spot from "./components/Spot/Spot";
import Hero from "./components/Hero/Hero";

// ...其他代码
<div id="menu">
  <HashRouter>
    {/* 添加路由导航链接 */}
    <div className="nav-bar">
      <Link to="/">首页</Link>
      <Link to="/spot">Spot页面</Link>
    </div>
    <Routes>
      <Route path="/" element={<Hero />} />
      <Route path="/spot" element={<Spot />} />
    </Routes>
  </HashRouter>
</div>

关键说明 #

• 必须导入Link组件创建跳转链接，点击Link会修改URL哈希值，触发Routes匹配对应组件，这是React Router推荐的无刷新跳转方式。
• 所有路由相关元素（Link、Routes等）都要被HashRouter包裹，否则路由系统无法正常监听路径变化。
• 如果不想用Link，也可以通过手动修改window.location.hash切换路径，但Link能更好地和React路由状态同步。

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