Javascript 盖茨比activeClassName不工作预览

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

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

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

---

您在

headerStyles.acitveNavItem

中有一个打字错误（请注意

acitveNavItem

）。将其更改为

headerStyles.acitveNavItem

：

从“React”导入React
从“盖茨比”导入{Link}
从“./header.module.scss”导入headerStyles
常量头=（）=>{
返回(
托弗的博客

家
关于
博客
接触

)
}
导出默认标题

您在

headerStyles.acitveNavItem

中有一个打字错误（请注意

acitveNavItem

）。将其更改为

headerStyles.acitveNavItem

：

从“React”导入React
从“盖茨比”导入{Link}
从“./header.module.scss”导入headerStyles
常量头=（）=>{
返回(
托弗的博客

家
关于
博客
接触

)
}
导出默认标题

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