首页 > 网络编程 > JavaScript > javascript类库 > React > React自动高亮

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

2024-07-29 08:27:23 作者：一汀烟雨

要根据当前页面路由自动高亮顶部菜单项,可以使用 React Router 的 useLocation 钩子来获取当前路径,并根据路径动态设置菜单项的高亮效果,本文给大家介绍了一个完整的示例,展示如何根据当前页面路由自动高亮顶部菜单项,需要的朋友可以参考下

要根据当前页面路由自动高亮顶部菜单项，可以使用 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;
}

解释

App.tsx:
- menuItems 数组定义了菜单项及其对应的路径。
- Menu 组件使用 useLocation 钩子来获取当前路径，并根据路径动态设置菜单项的高亮效果。
- 使用 Link 组件代替 a 标签，确保在单页面应用中进行无刷新导航。
- 定义了几个简单的路由组件 (Home, About, Services, Contact) 以展示页面内容。
- Router 组件包裹整个应用，Routes 组件定义了应用的路由。
App.css:
- 定义了基础的菜单样式。
- .menu-item 类定义了菜单项的基本样式。
- .menu-item:hover 类定义了悬停时的样式。
- .menu-item.active 类定义了高亮状态的样式，包括背景颜色和文本颜色的变化。

到此这篇关于React根据当前页面路由进行自动高亮示例代码的文章就介绍到这了,更多相关React自动高亮内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！