React实现动态导航

React 动态导航实现方法

使用 React Router 和状态管理

安装必要依赖：

npm install react-router-dom

创建路由配置文件：

// routes.js
const routes = [
  { path: '/', name: 'Home', component: Home },
  { path: '/about', name: 'About', component: About },
  { path: '/products', name: 'Products', component: Products }
];

动态渲染导航菜单

创建导航组件：

// Navbar.js
import { Link } from 'react-router-dom';
import routes from './routes';

function Navbar() {
  return (
    <nav>
      <ul>
        {routes.map((route) => (
          <li key={route.path}>
            <Link to={route.path}>{route.name}</Link>
          </li>
        ))}
      </ul>
    </nav>
  );
}

支持权限控制的动态导航

添加权限字段到路由配置：

// routes.js
const routes = [
  { path: '/', name: 'Home', component: Home, auth: false },
  { path: '/admin', name: 'Admin', component: Admin, auth: true }
];

修改导航组件实现权限过滤：

function Navbar({ isAuthenticated }) {
  return (
    <nav>
      <ul>
        {routes
          .filter(route => !route.auth || isAuthenticated)
          .map((route) => (
            <li key={route.path}>
              <Link to={route.path}>{route.name}</Link>
            </li>
          ))}
      </ul>
    </nav>
  );
}

嵌套路由实现

配置嵌套路由：

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    children: [
      { path: 'profile', name: 'Profile', component: Profile },
      { path: 'settings', name: 'Settings', component: Settings }
    ]
  }
];

渲染嵌套导航：

function SubNav({ parentPath, children }) {
  return (
    <div className="sub-nav">
      {children.map(child => (
        <Link key={child.path} to={`${parentPath}/${child.path}`}>
          {child.name}
        </Link>
      ))}
    </div>
  );
}

响应式导航实现

使用媒体查询和状态控制：

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

  return (
    <div className="nav-container">
      <button onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? 'Close' : 'Menu'}
      </button>

      <div className={`nav-menu ${isOpen ? 'open' : ''}`}>
        {routes.map(route => (
          <Link key={route.path} to={route.path}>
            {route.name}
          </Link>
        ))}
      </div>
    </div>
  );
}

动态高亮当前路由

使用 NavLink 组件自动添加 active 类：

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

function Navbar() {
  return (
    <nav>
      {routes.map(route => (
        <NavLink 
          key={route.path} 
          to={route.path}
          className={({ isActive }) => isActive ? 'active' : ''}
        >
          {route.name}
        </NavLink>
      ))}
    </nav>
  );
}

从 API 加载动态路由

异步获取路由配置：

function App() {
  const [dynamicRoutes, setDynamicRoutes] = useState([]);

  useEffect(() => {
    fetch('/api/routes')
      .then(res => res.json())
      .then(data => setDynamicRoutes(data));
  }, []);

  return (
    <Router>
      <Routes>
        {dynamicRoutes.map(route => (
          <Route 
            key={route.path} 
            path={route.path} 
            element={<route.component />} 
          />
        ))}
      </Routes>
    </Router>
  );
}