当前位置：首页 > React

react 怎么实现导航栏

2026-01-27 16:36:32React

使用 React Router 实现导航栏

React 中实现导航栏通常需要结合路由库（如 React Router）来管理页面跳转。以下是具体实现方法：

安装 React Router：

npm install react-router-dom

创建基础导航组件：

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li><Link to="/">首页</Link></li>
        <li><Link to="/about">关于</Link></li>
        <li><Link to="/contact">联系我们</Link></li>
      </ul>
    </nav>
  );
}

动态高亮当前页面

通过 NavLink 组件可以自动添加 active 类名：

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

function Navbar() {
  return (
    <nav>
      <ul>
        <li><NavLink to="/" exact activeClassName="active">首页</NavLink></li>
        <li><NavLink to="/about" activeClassName="active">关于</NavLink></li>
      </ul>
    </nav>
  );
}

响应式导航栏实现

结合 useState 实现移动端菜单切换：

import { useState } from 'react';

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

  return (
    <nav>
      <button onClick={() => setIsOpen(!isOpen)}>
        菜单
      </button>

      <ul className={`nav-links ${isOpen ? 'show' : ''}`}>
        {/* 导航链接 */}
      </ul>
    </nav>
  );
}

嵌套路由导航

对于多级路由可以这样组织：

import { Route, useRouteMatch } from 'react-router-dom';

function Products() {
  let { path } = useRouteMatch();

  return (
    <div>
      <nav>
        <Link to={`${path}/featured`}>特色商品</Link>
        <Link to={`${path}/new`}>新品</Link>
      </nav>

      <Route path={`${path}/:id`} component={ProductList} />
    </div>
  );
}

权限控制导航

结合认证状态显示不同导航项：

react 怎么实现导航栏

function Navbar({ isAuthenticated }) {
  return (
    <nav>
      {isAuthenticated ? (
        <Link to="/dashboard">控制台</Link>
      ) : (
        <Link to="/login">登录</Link>
      )}
    </nav>
  );
}

以上方法可以根据实际需求组合使用，React Router 提供了灵活的 API 来处理各种导航场景。对于更复杂的需求，可以考虑使用自定义 Hook 或 Context 来管理导航状态。

标签: react