求助：如何在Next.js中实现侧边栏导航链接添加active类

你当前的代码问题出在把className直接加在了Link组件上——Next.js的Link是路由跳转的包装组件，样式类应该应用到它内部的<a>标签上才会生效。另外我们还要确保路由切换时，active类能自动同步更新。

下面是修正后的完整代码：

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

const Sidebar = () => {
    const router = useRouter();
    const [side, setSide] = useState(false);

    const handleSide = () => {
        setSide(prev => !prev);
    };

    return (
        <>
            <div className={`sidebar ${side ? 'sidebar-active' : ''}`}>
                <ul>
                    {sideData.map((item) => {
                        // 用item.path作为key，比index更稳定
                        return (
                            <li key={item.path}>
                                <Link href={item.path}>
                                    {/* 把className移到a标签上，匹配路由时添加active类 */}
                                    <a className={router.pathname === item.path ? 'link link-active' : 'link'}>
                                        {item.title}
                                    </a>
                                </Link>
                            </li>
                        );
                    })}
                </ul>
            </div>
        </>
    );
};

export default Sidebar;

关键说明： #

• 样式类的正确位置：把className从Link组件移到内部的<a>标签，这样样式才能正常作用到链接元素上。
• 路由匹配逻辑：通过router.pathname获取当前页面的路由路径，和侧边栏项的item.path对比，匹配时添加link-active类。
• 响应式更新：useRouter提供的pathname是响应式的，当路由切换时，组件会自动重新渲染，更新对应的active类。
• 优化key值：尽量避免用index作为列表项的key，改用每个item的唯一标识（比如item.path），这在列表项顺序变化时能避免不必要的组件重渲染。

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