如何在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樣式可以使導航菜單在不同屏幕尺寸下具有不同的布局和樣式，從而實現響應式導航菜單。