Next.js路由切换时移除classList的实现方法咨询

我来帮你解决这个路由切换时移除激活类名的问题——你的现有代码其实有两个关键问题导致功能失效，我给你几个可行的解决方案：

先说说你当前代码的问题 #

1. 只给当前匹配的链接添加了link-on类，但没有移除之前激活链接的该类名，导致旧的激活状态一直保留
2. if(router.asPath)的判断逻辑不合理——router.asPath在路由切换后始终会有值，所以else分支永远不会执行，也就不会触发移除类的操作

方案1：修正现有DOM操作逻辑 #

直接调整你的代码，先清除所有已激活的类，再给当前匹配的元素添加类：

import { useRouter } from 'next/router';
import React, { useEffect } from 'react';

export default function YourComponent() {
  const router = useRouter();

  useEffect(() => {
    // 第一步：移除所有已激活链接的类名
    const allActiveLinks = document.querySelectorAll('.link-on');
    allActiveLinks.forEach(link => link.classList.remove('link-on'));

    // 第二步：给当前匹配的链接添加激活类
    const activatedTag = router.query.tags;
    if (activatedTag) {
      const targetLink = document.querySelector(`.${activatedTag}`);
      targetLink?.classList.add('link-on');
    }
  }, [router.asPath, router.query.tags]); // 加上router.query.tags作为依赖，确保标签变化时触发更新

  // 组件其余代码
  return (
    // 你的JSX结构
  );
}

方案2：用React状态替代直接DOM操作（更推荐） #

直接操作DOM不是React的最佳实践，我们可以用状态管理激活的标签，通过条件渲染来控制类名：

import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';

export default function TagNavigation() {
  const router = useRouter();
  // 初始化激活状态为当前路由的tags参数
  const [activeTag, setActiveTag] = useState(router.query.tags);

  useEffect(() => {
    // 路由或标签参数变化时，更新激活状态
    setActiveTag(router.query.tags);
  }, [router.asPath, router.query.tags]);

  // 示例标签列表，你可以替换成自己的数据源
  const tagList = ['react', 'nextjs', 'javascript', 'css'];

  return (
    <nav className="tag-nav">
      {tagList.map(tag => (
        <a
          key={tag}
          href={`/tags?tags=${tag}`}
          // 根据状态动态添加类名
          className={`tag-item ${activeTag === tag ? 'link-on' : ''}`}
        >
          #{tag}
        </a>
      ))}
    </nav>
  );
}

方案3：配合Next.js的Link组件使用 #

如果你项目里用的是Next.js官方的Link组件，也可以用同样的状态逻辑来实现：

import Link from 'next/link';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';

export default function TagNavigation() {
  const router = useRouter();
  const [activeTag, setActiveTag] = useState(router.query.tags);

  useEffect(() => {
    setActiveTag(router.query.tags);
  }, [router.asPath, router.query.tags]);

  const tagList = ['react', 'nextjs', 'javascript', 'css'];

  return (
    <nav className="tag-nav">
      {tagList.map(tag => (
        <Link key={tag} href={`/tags?tags=${tag}`} passHref>
          <a className={`tag-item ${activeTag === tag ? 'link-on' : ''}`}>
            #{tag}
          </a>
        </Link>
      ))}
    </nav>
  );
}

为什么这些方案更靠谱？ #

• 方案1快速修复了你现有代码的缺陷，确保路由切换时先清除旧状态再设置新状态
• 方案2和3遵循React的声明式编程思想，避免直接操作DOM，减少了DOM操作冲突的风险，也更易维护

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