ReactJS: Navbar当前页面效果

Question

当我在当前页面上时，我想要高亮效果。例如，如果我在“关于页面”上，我会喜欢在导航栏中突出显示。

我该怎么做？

相关守则

NavBar.js

function NavBar() {
    const [open, setOpen] = useState(false);
    NavBar.handleClickOutside = () => setOpen(false);

    return(
        <nav>
            <div className='navbar-container'>
                <a href='/' className='logo'>Daniel Zhang</a>
                <div className='toggle-button' onClick={() => setOpen(!open)}>
                    <div className='bar' />
                    <div className='bar' />
                    <div className='bar' />
                </div>
            </div>
            <div id='nav-links' className={open ? 'nav-open' : 'nav-collasped'}>
                <a href='/'>Home</a>
                <a href='/about'>About</a>
                {/* <a href='/blog'>Blog</a> */}
                <a href='/contact'>Contact</a>
            </div>
        </nav>
    );
}

const clickOutsideConfig = {
    handleClickOutside: () => NavBar.handleClickOutside,
};

export default onClickOutside(NavBar, clickOutsideConfig);

Answer 1

您可以使用来自的NavLink组件。进口：

import { NavLink } from 'react-router-dom';

而不是<a href='/about'>About</a>，您可以写：

<NavLink exact to='/about'  activeClassName="highlighted">About</Navlink>

对于<div id='nav-links'中存在的其他链接，等等。当然，您可以根据.highlighted添加突出显示的样式。

更多信息，请参阅https://reactrouter.com/web/api/NavLink