如何在ReactJS结合React Router中实现按钮随当前页面变色

你当前实现的点击临时变色只是交互反馈，要实现持久化的当前页提示，核心是让页面加载时就识别当前路由，给对应按钮加上高亮样式，下面是几种常用的实现方案：

1. 纯前端原生JS方案 #

适合静态页面或不需要后端渲染的场景，通过匹配当前页面URL和按钮的跳转地址来添加高亮类。

第一步：定义HTML和基础样式 #

<nav>
  <a href="/home" class="nav-btn">首页</a>
  <a href="/about" class="nav-btn">关于我们</a>
  <a href="/contact" class="nav-btn">联系我们</a>
</nav>

.nav-btn {
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  border-radius: 4px;
  margin: 0 4px;
  transition: background-color 0.3s ease;
}

/* 高亮样式 */
.nav-btn.active {
  background-color: #2196F3;
  color: #fff;
}

第二步：添加页面加载时的匹配逻辑 #

把这段JS放在页面底部（或DOM加载完成事件中）：

// 获取所有导航按钮
const navButtons = document.querySelectorAll('.nav-btn');
// 获取当前页面的路径（不含域名和参数）
const currentPagePath = window.location.pathname;

// 遍历按钮匹配路径
navButtons.forEach(btn => {
  const btnTargetPath = btn.getAttribute('href');
  // 处理根路径特殊情况（比如首页是/而按钮href是/home）
  const isMatch = currentPagePath === btnTargetPath 
    || (currentPagePath === '/' && btnTargetPath === '/home');
  
  if (isMatch) {
    btn.classList.add('active');
  }
});

2. 后端渲染方案（推荐） #

如果你的页面是后端生成的（比如PHP、Node.js、Django等），可以直接在渲染时给对应按钮加上active类，无需前端额外处理，性能更优。

举个PHP示例：

<nav>
  <a href="/home" class="nav-btn <?php echo $_SERVER['REQUEST_URI'] === '/home' ? 'active' : ''; ?>">首页</a>
  <a href="/about" class="nav-btn <?php echo $_SERVER['REQUEST_URI'] === '/about' ? 'active' : ''; ?>">关于我们</a>
</nav>

3. 前端框架方案（Vue/React） #

如果用Vue、React这类框架，结合路由工具可以更简洁实现：

Vue + Vue Router 示例 #

<template>
  <nav>
    <router-link 
      to="/home" 
      class="nav-btn"
      :class="{ active: $route.path === '/home' }"
    >首页</router-link>
    <router-link 
      to="/about" 
      class="nav-btn"
      :class="{ active: $route.path === '/about' }"
    >关于我们</router-link>
  </nav>
</template>

<style scoped>
.nav-btn.active {
  background-color: #2196F3;
  color: white;
}
</style>

React + React Router 示例 #

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

function Navbar() {
  const location = useLocation();

  return (
    <nav>
      <a 
        href="/home" 
        className={`nav-btn ${location.pathname === '/home' ? 'active' : ''}`}
      >首页</a>
      <a 
        href="/about" 
        className={`nav-btn ${location.pathname === '/about' ? 'active' : ''}`}
      >关于我们</a>
    </nav>
  );
}

注意事项 #

• 如果使用哈希路由（URL带#），需要用window.location.hash替代pathname进行匹配
• 若URL包含查询参数（比如/about?id=1），pathname不受影响，无需额外处理
• 可以保留你原来的点击变色逻辑作为交互补充，但核心高亮要依赖页面路由匹配

内容的提问来源于stack exchange，提问作者Dan