本文讲解如何将 react-burger-menu 的静态 标签替换为 react-router-dom 的 组件，配合 BrowserRouter 实现声明式路由跳转，解决侧边栏菜单无法导航到具体页面的问题。

本文讲解如何将 react-burger-menu 的静态 `` 标签替换为 `react-router-dom` 的 `` 组件，配合 browserrouter 实现声明式路由跳转，解决侧边栏菜单无法导航到具体页面的问题。

在使用 react-burger-menu 构建响应式侧边栏时，菜单项默认使用原生 标签（如示例中的 href=""），但这仅触发页面刷新或无效跳转，无法与 React 单页应用（SPA）的路由系统协同工作。要实现平滑、无刷新的页面切换，必须将其与 react-router-dom 集成。

✅ 正确做法：用 替代

首先，在 getItems() 方法中，将所有 @#@#@#@#@#@#@#@#@#@1：会强制全量重载，破坏 SPA 体验，且无法访问 useParams/useLocation 等 Hook；

shopify-app-react-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

下载

✅ 始终使用 ：声明式导航，支持浏览器前进/后退，兼容路由状态管理；

✅ 确保顶层有 ：这是所有路由功能的前提；

✅ 路径统一维护：建议将菜单路径提取为常量或配置对象，便于维护和类型检查；

✅ 添加 NavLink 激活样式（进阶）：可利用 className={({ isActive }) => isActive ? 'active' : ''} 实现当前菜单高亮。

通过以上三步改造，你的汉堡菜单即可无缝对接 React Router，实现专业级单页导航体验。

npm install react-router-dom

import { Link } from 'react-router-dom';
// 其他导入保持不变...

getItems() {
  return [
    <link key="0" to="/"><fontawesomeicon icon="{faHouseMedical}" fixedwidth></fontawesomeicon><span>Home</span>
    ,
    <link key="1" to="/medical-history"><fontawesomeicon icon="{faHospitalUser}" fixedwidth></fontawesomeicon><span>Medical History</span>
    ,
  ];
}

// 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}"></demo></browserrouter>
);

// 在 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>} />
    <route path="/medical-history" element="{<MedicalHistoryPage"></route>} />
    {/* 可按需添加更多路由 */}
  </routes></main>