Question

我正在用next.js创建一个小型网站，以便将它作为静态HTML网站部署在Github上。我在使用经典的“活动”导航栏类时遇到了一些问题。编译静态页面时，有什么方法可以使Next导出适当的活动类？

我有一个导航栏组件，该组件被添加到布局组件中并在两个页面上使用：

const Navbar = () => (
    <nav>
        <ul>
            <li><Link activeClassName="active" href="/"><a>About Me</a></Link></li>
            <li><Link activeClassName="active" href="/skills"><a>Skills</a></Link></li>
        </ul>
    </nav>
);

export default Navbar;

我有这个链接组件，当在本地部署应用程序时，它会应用活动类：

import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'

const ActiveLink = ({ router, children, ...props }) => {
    const child = Children.only(children);

    let className = child.props.className || null;

    if (router.pathname === props.href && props.activeClassName) {
        className = `${className !== null ? className : ''} ${props.activeClassName}`.trim();
    }

    delete props.activeClassName;

    return <Link {...props}>{React.cloneElement(child, { className })}</Link>
}

export default withRouter(ActiveLink);

当我在本地将其作为react应用程序运行时，此代码可以完美运行，但是如果我将其作为静态HTML导出到/ out，则不再应用活动类。我不太确定如何解决此问题，我一直在到处寻找。我一直在寻找矛盾的答案，似乎没有任何效果。如有必要，我可以发布更多代码。

Answer 1

import { withRouter } from 'next/router'
import Link from 'next/link'
import React, { Children } from 'react'

const ActiveLink = ({ router, children, ...props }) => {
    debugger;

    console.log(JSON.stringify(`Props: ${props}`))

    console.log(JSON.stringify(`Router: ${router}`))

    const child = Children.only(children);

    let className = child.props.className || '';

    const { activeClassName, ...restProps } = props;

    if (router.pathname === props.href && activeClassName) {
        className = `${className} ${props.activeClassName}`.trim();
    }

    return <Link {...restProps}>{React.cloneElement(child, { className })}</Link>
}

export default withRouter(ActiveLink);

尝试在VSCode中使用带有Chrome的Node调试器在静态和SSR模式下逐步调试该组件，并了解两者之间的区别。

否则，请尝试将控制台输出粘贴到JSONEditorOnline并在此处进行检查。

我们知道答案与此行有关

    if (router.pathname === props.href && props.activeClassName) {

Next.js导出后，如何使activeClass与静态页面一起使用？

1 个答案: