如何在React中实现一个响应式的导航菜单

在React中实现一个响应式的导航菜单可以使用React Router库和CSS来实现。下面是一个简单的示例代码：

1. 首先安装React Router库：

npm install react-router-dom

2. 创建一个包含导航菜单的组件：

import React from 'react';
import { Link } from 'react-router-dom';

const Navbar = () => {
  return (
    <nav>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/contact">Contact</Link></li>
      </ul>
    </nav>
  );
};

export default Navbar;

3. 在App.js中使用导航菜单组件：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Contact from './Contact';

const App = () => {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
};

export default App;

4. 创建其他页面组件（例如Home.js, About.js, Contact.js）。

现在当用户点击导航菜单中的链接时，页面会根据所点击的链接显示相应的内容。通过CSS样式可以使导航菜单在不同屏幕尺寸下具有不同的布局和样式，从而实现响应式导航菜单。