React Router Dom如何仅在大屏断点下生效NavLink激活样式

两种实现思路，优先选择第一种CSS方案，性能表现更好。

方案一：CSS媒体查询实现（推荐） #

内联样式本身不支持响应式断点判断，把激活状态的样式迁移到CSS类上，利用原生媒体查询控制大屏下才生效即可：

1. 把原来style属性上的激活逻辑迁移到className上，NavLink本身支持给className传递接收isActive参数的函数：

<NavLink 
  className={({ isActive }) => isActive ? "nav-link nav-link-active" : "nav-link"} 
  to="/"
>
  首页
</NavLink>

2. 编写对应样式，将激活样式包裹在对应大屏断点的媒体查询中，断点值和你项目汉堡菜单的切换阈值保持一致即可，比如常用的768px：

/* 导航项基础样式 */
.nav-link {
  color: inherit;
  text-decoration: none;
  /* 其他大小屏通用的导航样式可以写在这里 */
}

/* 仅屏幕宽度≥768px（大屏）时激活样式生效 */
@media (min-width: 768px) {
  .nav-link-active {
    padding: 20px;
    background-color: #0000001a;
    border-radius: 8px;
  }
}

该方案由浏览器原生处理媒体查询逻辑，不需要额外绑定事件监听，无额外性能开销，也不会出现宽度切换时的样式闪烁问题。

方案二：JS判断视口宽度（适配必须用内联样式的场景） #

如果项目约束必须保留内联样式写法，可以通过window.matchMedia监听视口宽度，判断当前为大屏时才返回激活样式：

1. 封装一个自定义hook用于实时获取当前是否处于大屏断点：

import { useState, useEffect } from 'react';

// 入参为你项目的大屏断点值，默认768px
const useIsDesktop = (breakpoint = 768) => {
  const [isDesktop, setIsDesktop] = useState(() => window.matchMedia(`(min-width: ${breakpoint}px)`).matches);

  useEffect(() => {
    const mediaIns = window.matchMedia(`(min-width: ${breakpoint}px)`);
    const updateStatus = (e) => setIsDesktop(e.matches);
    mediaIns.addEventListener('change', updateStatus);
    return () => mediaIns.removeEventListener('change', updateStatus);
  }, [breakpoint]);

  return isDesktop;
};

2. 在导航组件中调用该hook，改写原来的activeNavItem函数：

// 组件内调用，如果你项目断点是1024/1200直接传对应数值即可
const isDesktop = useIsDesktop();

const activeNavItem = ({ isActive }) => {
  // 小屏下统一返回非激活样式
  if (!isDesktop) {
    return {
      padding: "0px",
      backgroundColor: "transparent",
      borderRadius: "0px"
    };
  }
  // 大屏下才根据激活状态切换样式
  return {
    padding: isActive ? "20px" : "0px",
    backgroundColor: isActive ? "#0000001a" : "transparent",
    borderRadius: isActive ? "8px" : "0px"
  };
};

// NavLink绑定逻辑不需要改动
<NavLink style={activeNavItem} to="/">
  首页
</NavLink>

注意：传入的断点数值必须和汉堡菜单的显示/隐藏断点完全一致，避免出现菜单状态和激活样式不同步的问题。

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