Gatsby activeClassName 不工作预览

问题描述

我试图在 Gatsby 中使用 activeClassName 以便突出显示活动导航。我现在确定我哪里出错了

variable

我不确定为什么它在我的服务器端不起作用。 enter image description here

如果需要，这是我的 SCSS 代码。

variable

解决方法

您在 headerStyles.acitveNavItem 中有一个拼写错误（注意 acitveNavItem）。将其更改为 headerStyles.acitveNavItem：

import React from 'react'
import {Link} from 'gatsby'

import headerStyles from './header.module.scss'

const Header = () => {
    return (
        <header className={headerStyles.header}>
            <h1>
                <Link className={headerStyles.title} to="/">
                    Topher's Blog
                </Link>
            </h1>
            <nav>
                <ul className={headerStyles.navList} >
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/">Home</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/about">About</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/blog">Blog</Link> </li>
                    <li> <Link className={headerStyles.navItem} activeClassName={headerStyles.acitveNavItem} to="/contact">Contact</Link> </li>
                </ul>
            </nav>
        </header>
    )
}

export default Header