本文介绍如何将 react-burger-menu 与 React Router 集成，通过 组件替代原生 标签，实现点击侧边栏菜单项后无刷新跳转至对应路由页面，并确保路由上下文正确注入。
本文介绍如何将 react-burger-menu 与 react router 集成，通过 `` 组件替代原生 `` 标签，实现点击侧边栏菜单项后无刷新跳转至对应路由页面，并确保路由上下文正确注入。
要在 react-burger-menu 中实现点击菜单项跳转到指定页面，核心在于用 React Router 的 （或 标签，并确保整个应用（包括 Demo 组件）被包裹在
✅ 正确做法：使用
首先，在 Demo 组件中导入 Link：
import { Link } from 'react-router-dom';
然后修改 getItems() 方法，将 替换为 ，并设置 to 属性指向目标路径（注意路径需与后续
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>
,
];
}
⚠️ 注意拼写：原问题中路径写为
/midical-history，应修正为/medical-history（避免低级拼写错误导致 404）。
✅ 必须包裹在
组件依赖 React Router 提供的 Router 上下文。因此，不能直接渲染 index.js 或 main.jsx）中调整如下：
构建 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）
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import Demo from './Demo'; // 确保路径正确
import './index.css';
const root = ReactDOM.createRoot(document.getElementById('app'));
root.render(
<browserrouter><demo menus="{menus}"></demo></browserrouter>
);
✅ 同时配置页面内容路由（推荐搭配
仅替换菜单链接还不够——你还需要在主内容区（即 ）动态渲染对应页面。建议将硬编码的 和 替换为
// 在 Demo.render() 的 <main id="page-wrap"> 内部：
<main id="page-wrap"><routes><route path="/" element="{<HomePage"></route>} />
<route path="/medical-history" element="{<MedicalHistoryPage"></route>} />
<route path="*" element="{<NotFoundPage"></route>} />
</routes></main></main>
其中 HomePage、MedicalHistoryPage 等为你自定义的函数组件，用于展示各页面内容。
? 补充说明与最佳实践
-
不要混用
href和to：会触发整页刷新，破坏单页应用（SPA）体验；务必统一使用。 -
className={({ isActive }) => isActive ? 'active' : ''}等激活状态样式，便于高亮当前页面菜单。 -
确保
pageWrapId与 DOM ID 匹配：react-burger-menu的pageWrapId="page-wrap"必须与的 ID 完全一致，否则动画可能异常。 -
React Router v6+ 要求：本方案基于
react-router-dom@6.x（推荐 v6.22+），若使用旧版 v5，请改用
通过以上三步（替换链接、包裹 Router、配置 Routes），即可让汉堡菜单真正“活起来”，成为可导航、可响应、符合现代 React 路由规范的交互式侧边栏。
