react实现导航栏

React 实现导航栏的方法

使用 React Router 实现基础导航栏

安装 React Router 依赖：

npm install react-router-dom

创建导航组件：

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

function 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>
  );
}

在主应用中配置路由：

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

function App() {
  return (
    <Router>
      <Navbar />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

添加响应式设计

使用 CSS 媒体查询实现响应式导航栏：

/* Navbar.css */
nav ul {
  display: flex;
  list-style: none;
  padding: 0;
}

nav li {
  margin-right: 20px;
}

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
}

实现下拉菜单

创建带下拉功能的导航项：

function DropdownNav() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <li className="dropdown">
      <button onClick={() => setIsOpen(!isOpen)}>
        Services
      </button>
      {isOpen && (
        <ul className="dropdown-menu">
          <li><Link to="/service1">Service 1</Link></li>
          <li><Link to="/service2">Service 2</Link></li>
        </ul>
      )}
    </li>
  );
}

添加下拉菜单样式：

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

使用 UI 库快速实现

安装 Material-UI：

npm install @mui/material @emotion/react @emotion/styled

使用 AppBar 组件：

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Button from '@mui/material/Button';

function MaterialNavbar() {
  return (
    <AppBar position="static">
      <Toolbar>
        <Button color="inherit" href="/">Home</Button>
        <Button color="inherit" href="/about">About</Button>
      </Toolbar>
    </AppBar>
  );
}

添加活动状态指示

高亮当前活动路由：

import { useLocation } from 'react-router-dom';

function NavItem({ to, children }) {
  const location = useLocation();
  const isActive = location.pathname === to;

  return (
    <li className={isActive ? 'active' : ''}>
      <Link to={to}>{children}</Link>
    </li>
  );
}

添加活动状态样式：

.active a {
  color: #007bff;
  font-weight: bold;
}