在React中如何根据当前页面路由进行自动高亮

要根据当前页面路由自动高亮顶部菜单项，可以使用 React Router 的 useLocation 钩子来获取当前路径，并根据路径动态设置菜单项的高亮效果。

示例代码

以下是一个完整的示例，展示如何根据当前页面路由自动高亮顶部菜单项：

1. 安装 React Router

首先，确保你已经安装了 React Router：

npm install react-router-dom

2. 创建菜单和路由组件

我们需要创建一个包含菜单和路由的主组件，并使用 useLocation 钩子来动态设置高亮的菜单项。

3. 定义路由和菜单项

定义你的路由和菜单项，并在菜单组件中根据当前路径设置高亮效果。

App.tsx

import React from 'react';
import { BrowserRouter as Router, Route, Routes, Link, useLocation } from 'react-router-dom';
import './App.css';

const menuItems = [
  { name: 'Home', path: '/' },
  { name: 'About', path: '/about' },
  { name: 'Services', path: '/services' },
  { name: 'Contact', path: '/contact' },
];

const Menu: React.FC = () => {
  const location = useLocation();

  return (
    <div className="menu">
      {menuItems.map((item, index) => (
        <Link key={index} to={item.path} className={`menu-item ${location.pathname === item.path ? 'active' : ''}`}>
          {item.name}
        </Link>
      ))}
    </div>
  );
};

const Home: React.FC = () => <div>Home Page</div>;
const About: React.FC = () => <div>About Page</div>;
const Services: React.FC = () => <div>Services Page</div>;
const Contact: React.FC = () => <div>Contact Page</div>;

const App: React.FC = () => {
  return (
    <Router>
      <Menu />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/services" element={<Services />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
};

export default App;

App.css

.menu {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background-color: #f0f0f0;
}

.menu-item {
  padding: 10px 20px;
  cursor: pointer;
  text-decoration: none;
  color: black;
  transition: background-color 0.3s, color 0.3s;
}

.menu-item:hover {
  background-color: #d3d3d3;
}

.menu-item.active {
  background-color: #1976d2;
  color: white;
  border-radius: 4px;
}

解释

1. App.tsx:

   • menuItems 数组定义了菜单项及其对应的路径。
   • Menu 组件使用 useLocation 钩子来获取当前路径，并根据路径动态设置菜单项的高亮效果。
   • 使用 Link 组件代替 a 标签，确保在单页面应用中进行无刷新导航。
   • 定义了几个简单的路由组件 (Home, About, Services, Contact) 以展示页面内容。
   • Router 组件包裹整个应用，Routes 组件定义了应用的路由。

2. App.css:

   • 定义了基础的菜单样式。
   • .menu-item 类定义了菜单项的基本样式。
   • .menu-item:hover 类定义了悬停时的样式。
   • .menu-item.active 类定义了高亮状态的样式，包括背景颜色和文本颜色的变化。