如何实现react-burger-menu汉堡菜单点击跳转页面？

步骤1：安装依赖 #

确保你已经安装了react-router-dom，如果没有，执行：

npm install react-router-dom
# 或者
yarn add react-router-dom

步骤2：重构组件，集成路由 #

以下是适配你现有MenuWrap和Demo类组件结构的完整改造示例：

首先引入必要的路由组件：

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import { slide as Menu } from 'react-burger-menu';

定义几个示例页面组件（可替换为你的业务页面）：

const Home = () => <h2>首页</h2>;
const About = () => <h2>关于我们</h2>;
const Contact = () => <h2>联系我们</h2>;

改造MenuWrap组件，用Link替代原生跳转标签：

class MenuWrap extends React.Component {
  render() {
    return (
      <Menu>
        {/* 使用React Router的Link实现无刷新跳转 */}
        <Link to="/" className="menu-item">首页</Link>
        <Link to="/about" className="menu-item">关于我们</Link>
        <Link to="/contact" className="menu-item">联系我们</Link>
      </Menu>
    );
  }
}

最后改造Demo组件，包裹路由并配置页面映射：

class Demo extends React.Component {
  render() {
    return (
      {/* 用Router包裹整个应用，提供路由上下文 */}
      <Router>
        <div>
          {/* 渲染汉堡侧边菜单 */}
          <MenuWrap />
          {/* 路由出口：匹配成功的页面将在这里渲染 */}
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/about" element={<About />} />
            <Route path="/contact" element={<Contact />} />
          </Routes>
        </div>
      </Router>
    );
  }
}

关键说明 #

• 用Link替换原生<a>：Link会阻止默认页面刷新，通过React Router管理路由状态，实现单页应用的无刷新跳转。
• 路由上下文：整个应用必须包裹在Router（这里用BrowserRouter）内部，让所有路由组件能获取路由状态。
• 路由映射：Routes与Route组合定义路径和页面组件的对应关系，匹配到的组件会在Routes区域渲染。

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