当前位置：首页 > React

react实现导航栏

2026-01-26 23:04:11React

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

添加活动状态样式：

react实现导航栏

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

标签: react

分享给朋友：

react 如何引入jquery

引入 jQuery 到 React 项目在 React 项目中引入 jQuery 可以通过多种方式实现，但需要注意 React 和 jQuery 操作 DOM 的方式可能冲突，因此建议仅在必要时使用…

react 如何操作cookie

安装依赖在React项目中操作cookie通常需要第三方库的支持，推荐使用js-cookie。通过npm或yarn安装： npm install js-cookie # 或 yarn add js…

react 如何修改state

修改 state 的基础方法在 React 中，state 的修改必须通过 setState 方法（类组件）或 state 更新函数（函数组件）。直接修改 state 会导致组件不会重新渲染，且可能…

react如何代码优化

减少不必要的重新渲染使用 React.memo 包装函数组件以避免在 props 未变化时重新渲染。对于类组件，可以通过 shouldComponentUpdate 或继承 PureComponen…

react如何切换class

动态切换 React 组件的类名在 React 中动态切换类名可以通过多种方式实现，以下是常见的几种方法：使用模板字符串和状态管理 function MyComponent() {…

react less如何配置

在 React 项目中配置 Less 安装必要的依赖包，确保项目支持 Less 预处理样式。使用以下命令安装 less 和 less-loader： npm install less less-lo…

react实现导航栏