React/Nextjs项目点击新链接后如何移除之前点击链接的边框样式

解决方案 #

你当前的核心问题是没有通过React状态统一管理选中项，而是直接操作单个DOM元素的行内样式，没有记录上一个选中元素的引用，自然无法清除旧样式。建议改为状态驱动的样式绑定，无需手动操作DOM，实现逻辑更简洁：

修改后的完整代码

import { useEffect, useState } from 'react';
import Link from 'next/link';
import Logo from '../../components/logo.svg';
import React from 'react';
import getConfig from 'next/config';
import { useRouter } from 'next/router';

const {
    publicRuntimeConfig: { domain },
} = getConfig();

export default function MediaNav() {
    const router = useRouter();
    const menu = ['Home', 'FAQs', 'Contact Us', 'Social Media'];
    // 状态存储当前选中的菜单项索引，初始可匹配当前路由实现自动高亮
    const [selectedIndex, setSelectedIndex] = useState(-1);

    // 可选：页面加载/路由变化时自动匹配当前路由对应的菜单项高亮
    useEffect(() => {
        const currentPath = router.pathname;
        const matchIndex = menu.findIndex(item => {
            const href = item === 'Home' ? '/subdomain/link' : `/subdomain/${item}`.replace(/\s+/g, '').toLowerCase();
            return href === currentPath;
        });
        if(matchIndex > -1) setSelectedIndex(matchIndex);
    }, [router.pathname])

    const handleLinkClick = (index) => {
        // 仅更新选中索引，样式会随状态自动重渲染
        setSelectedIndex(index);
    };

    return (
        <nav>
            <div>
                <Link href={`${domain}`}>
                    <a>
                        <Logo />
                    </a>
                </Link>
            </div>
            <ul>
                <div>
                    <ul>
                        <li>
                            <a href="/subdomain/link">All Sites</a>
                        </li>
                    </ul>
                    <ul>
                        {menu.map((item, i) => {
                            const href = item === 'Home' ? '/subdomain/link' : `/subdomain/${item}`.replace(/\s+/g, '').toLowerCase();
                            return (
                                <li key={i}>
                                    <Link href={href}>
                                        <a 
                                            onClick={() => handleLinkClick(i)}
                                            {/* 动态绑定样式，当前选中项加边框，否则无样式 */}
                                            style={{
                                                borderLeft: selectedIndex === i ? '3px solid #005ba9' : 'none',
                                                borderRight: selectedIndex === i ? '3px solid #005ba9' : 'none'
                                            }}
                                        >
                                            {item}
                                        </a>
                                    </Link>
                                </li>
                            );
                        })}
                    </ul>
                </div>
            </ul>
        </nav>
    );
}

核心修改点

• 废弃直接操作DOM样式的逻辑，所有样式通过React状态动态绑定，符合声明式编程规范
• 状态仅存储当前选中的菜单项索引，点击新元素时更新索引，React自动重渲染所有菜单项，旧选中项的边框会自动移除，无需手动清除
• 新增路由匹配的可选逻辑，即使用户直接访问子页面、刷新页面，也能正确高亮对应菜单项，适配Next.js单页跳转的场景

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