React根据当前页面路由进行自动高亮示例代码

npm install react-router-dom

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;

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