reactjs - NextJS 和引导移动导航

Question

我正在为导航栏使用带有 NextJS 的引导程序，但由于 React 和 Next 在移动视图上的动态页面更改而出现一个问题，因此在单击链接并加载新页面后菜单保持打开状态。

尝试了几种方法来尝试使其在页面更改时关闭，但均未成功。实现这一目标的最佳方法是什么？

import { useEffect } from 'react'
import Link from 'next/link'
import Image from 'next/image'
import { ArrowDownCircle } from 'react-bootstrap-icons'
import logo from '../public/images/logo.gif'
import styles from '../styles/Navbar.module.scss'

const Navbar = () => {
    useEffect(() => {
        import('bootstrap/js/dist/collapse')
        import('bootstrap/js/dist/dropdown')
    }, []);

    return (
        <nav id="navbar" className="navbar navbar-expand-md navbar-light container">
            <div>
                <Link href="/" prefetch={false}><a className="navbar-brand">

                    <Image
                        src={logo}
                        alt="Logo"
                        layout="intrinsic"
                        width={200}
                        height={50}
                        priority={true}
                    />

                </a></Link>
            </div>

            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>

            <div className="collapse navbar-collapse" id="navbarNav">

                <ul className={`${styles.navLink} navbar-nav ms-auto`}>
                    <li className="nav-item">
                        <Link href="/" prefetch={false}><a className={`${styles.link} nav-link`} aria-current="page">Home</a></Link>
                    </li>
                    <li className="nav-item">
                        <Link href="/about" prefetch={false}><a className={`${styles.link} nav-link`}>About</a></Link>
                    </li>
                    <li className="nav-item dropdown">
                        <a className={`${styles.link} nav-link`} id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Services <ArrowDownCircle className="ms-1" /></a>
                        <ul className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                            <li><Link href="/web-design"><a className="dropdown-item">Web Design</a></Link></li>
                            <li><Link href="/web-development"><a className="dropdown-item">Web Development</a></Link></li>
                            <li><Link href="/ecommerce"><a className="dropdown-item">eCommerce</a></Link></li>
                        </ul>
                    </li>
                    <li className="nav-item">
                        <Link href="/faq" prefetch={false}><a className={`${styles.link} nav-link`}>FAQ</a></Link>
                    </li>
                    <li className="nav-item">
                        <Link href="/contact" prefetch={false}><a className={`${styles.link} nav-link`}>Contact</a></Link>
                    </li>
                </ul>
            </div>

            <style jsx>{`
            a {
                background: none;
            }
            a:hover {
                background: none;
            }
            `}</style>
            
        </nav>
    );
}

export default Navbar;

标签： reactjstwitter-bootstrapnext.js