使用React中的尾风CSS突出显示活动导航项

Question

我有这样的导航条：

<nav className="bg-white shadow dark:bg-gray-800">
<div className="container flex items-center justify-center p-6 mx-auto text-gray-600 capitalize dark:text-gray-300">
        <Link
                to="/home"
                className="text-gray-800 transition-colors duration-300 transform dark:text-gray-200 border-b-2 border-blue-500 mx-1.5 sm:mx-6"
        >
                home
        </Link>

        <Link
                to="/invoices"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                features
        </Link>

        <Link
        
                to="/forms"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                forms
        </Link>

        <Link
                to="/newForm"
                className="border-b-2 border-transparent hover:text-gray-800 transition-colors duration-300 transform dark:hover:text-gray-200 hover:border-blue-500 mx-1.5 sm:mx-6"
        >
                form2
        </Link>
</nav>

我想在点击导航项时更改它，但是在我搜索过的堆栈溢出文件中，我只找到了NestJS、Next.js等的解决方案，没有反应。

Answer 1

您应该在active中的className上使用tailwindCSS变量。

例如：

<Link
    to="/home"
    className="text-gray-300 active:text-blue-500"
>
    home
</Link>

Answer 2

您确实需要定义如何确定是否首先添加类。

在我看来，你可能想循环一下你的物品：

const isCurrentPage = (href: string) => {
   // return true if `href` is the current path, many ways you could do this
}

// loop through your items and conditionally add the class if active...
['/home', '/invoices', '/forms'].map(href => <Link key={href} href={href} className={isCurrentPage(href) ? 'active' : ''} />

您的isCurrentPage函数依赖于您的应用程序逻辑和设置；您可能需要依赖某些逻辑(比如window.location.pathname.indexOf(href) === 0 )来启动。