React根據當前頁面路由進行自動高亮示例代碼

更新時間：2024年07月29日 08:27:22 作者：一汀煙雨

要根據當前頁面路由自動高亮頂部菜單項,可以使用 React Router 的 useLocation 鉤子來獲取當前路徑,并根據路徑動態(tài)設置菜單項的高亮效果,本文給大家介紹了一個完整的示例,展示如何根據當前頁面路由自動高亮頂部菜單項,需要的朋友可以參考下

示例代碼

以下是一個完整的示例，展示如何根據當前頁面路由自動高亮頂部菜單項：

1. 安裝 React Router

首先，確保你已經安裝了 React Router：

npm install react-router-dom

2. 創(chuàng)建菜單和路由組件

我們需要創(chuàng)建一個包含菜單和路由的主組件，并使用 useLocation 鉤子來動態(tài)設置高亮的菜單項。

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

解釋

App.tsx:
- menuItems 數組定義了菜單項及其對應的路徑。
- Menu 組件使用 useLocation 鉤子來獲取當前路徑，并根據路徑動態(tài)設置菜單項的高亮效果。
- 使用 Link 組件代替 a 標簽，確保在單頁面應用中進行無刷新導航。
- 定義了幾個簡單的路由組件 (Home, About, Services, Contact) 以展示頁面內容。
- Router 組件包裹整個應用，Routes 組件定義了應用的路由。
App.css:
- 定義了基礎的菜單樣式。
- .menu-item 類定義了菜單項的基本樣式。
- .menu-item:hover 類定義了懸停時的樣式。
- .menu-item.active 類定義了高亮狀態(tài)的樣式，包括背景顏色和文本顏色的變化。