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