本文讲解如何将 react-burger-menu 的静态 标签替换为 react-router-dom 的 组件，配合 BrowserRouter 实现声明式路由跳转，解决侧边栏菜单无法导航到具体页面的问题。
本文讲解如何将 react-burger-menu 的静态 `` 标签替换为 `react-router-dom` 的 `` 组件，配合 browserrouter 实现声明式路由跳转，解决侧边栏菜单无法导航到具体页面的问题。
在使用 react-burger-menu 构建响应式侧边栏时，菜单项默认使用原生 <a></a> 标签（如示例中的 href=""），但这仅触发页面刷新或无效跳转，无法与 React 单页应用（SPA）的路由系统协同工作。要实现平滑、无刷新的页面切换，必须将其与 react-router-dom 集成。
✅ 正确做法：用 <link> 替代 <a></a>
首先，在 getItems() 方法中，将所有 <a></a> 标签替换为 react-router-dom 提供的 <link>（推荐 v6+ 语法）或 <navlink></navlink>（支持激活样式高亮）。注意需提前安装并导入：
npm install react-router-dom
import { Link } from 'react-router-dom';
// 其他导入保持不变...
getItems() {
return [
<Link key="0" to="/">
<FontAwesomeIcon icon={faHouseMedical} fixedWidth />
<span>Home</span>
</Link>,
<Link key="1" to="/medical-history">
<FontAwesomeIcon icon={faHospitalUser} fixedWidth />
<span>Medical History</span>
</Link>,
];
}⚠️ 注意路径拼写：原问题中误写为
/midical-history，应修正为语义正确的/medical-history（避免拼写错误导致 404）。
✅ 必须包裹 <browserrouter></browserrouter> 上下文
<link> 组件依赖 Router 提供的上下文（如 navigate、location 等）。若 Demo 组件未被 <browserrouter></browserrouter> 包裹，点击将完全失效（控制台可能报错 useNavigate may be used only in the context of a <router> component</router>）。
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
因此，务必在应用入口（如 index.js 或 main.jsx）中将 <demo></demo> 渲染在 <browserrouter></browserrouter> 内：
// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import Demo from './Demo'; // 调整为实际路径
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
<BrowserRouter>
<Demo menus={menus} />
</BrowserRouter>
);✅ （可选）增强体验：添加路由出口与页面组件
为使跳转真正生效，还需在 main#page-wrap 区域内渲染对应页面内容。建议将 <main id="page-wrap"></main> 改为 <routes></routes> 容器，并定义 <route></route>：
// 在 Demo.render() 的 main 内部（需先 import { Routes, Route } from 'react-router-dom'）
<main id="page-wrap">
<h1>...</h1>
<h2 className="description">...</h2>
<nav className="demo-buttons">{buttons}</nav>
{/* 新增路由出口 */}
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/medical-history" element={<MedicalHistoryPage />} />
{/* 可按需添加更多路由 */}
</Routes>
</main>其中 HomePage 和 MedicalHistoryPage 是你定义的函数组件，负责展示各页面具体内容。
✅ 总结与最佳实践
- ❌ 不要使用
<a href="/xxx"></a>：会强制全量重载，破坏 SPA 体验，且无法访问useParams/useLocation等 Hook； - ✅ 始终使用
<link to="...">：声明式导航，支持浏览器前进/后退，兼容路由状态管理； - ✅ 确保顶层有
<browserrouter></browserrouter>：这是所有路由功能的前提； - ✅ 路径统一维护：建议将菜单路径提取为常量或配置对象，便于维护和类型检查；
- ✅ 添加
NavLink激活样式（进阶）：可利用className={({ isActive }) => isActive ? 'active' : ''}实现当前菜单高亮。
通过以上三步改造，你的汉堡菜单即可无缝对接 React Router，实现专业级单页导航体验。
