Reactjs如何在非活动路由上切换类？答案

【问题标题】：Reactjs how to toggle a class on inactive route?Reactjs如何在非活动路由上切换类？
【发布时间】：2020-04-17 20:23:59
【问题描述】：

这是我的第一个 reactjs 应用程序（长期 Angular 开发人员想看看对方是什么样的）。我想在非活动链接上添加一个“空心”类。我正在使用react-router-dom。这是我的简单菜单：

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

const Menu = () => {
    return (
        <div className="button-group no-gaps">
            <NavLink to="/work-items"><a className="button">Work Items</a></NavLink>
            <NavLink to="/settings"><a className="button">Settings</a></NavLink>
        </div>
    );
}

export default Menu;

我该怎么做呢？我看到 react-router-dom 在 NavLink 上有一个 activeClassName 属性，但没有 inactiveClassName 属性？

编辑：我想在<NavLink> 内的<a> 的inactiveRoute 上动态添加“空心”类。在下面的代码中，工作项路由处于非活动状态。

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

const Menu = () => {
    return (
        <div className="button-group no-gaps">
            <NavLink to="/work-items"><a className="button hollow">Work Items</a></NavLink>
            <NavLink to="/settings"><a className="button">Settings</a></NavLink>
        </div>
    );
}

export default Menu;

编辑： machineghost 使用 useLocation 钩子为我指明了正确的道路。这是我的工作解决方案。

import React, {useEffect} from 'react';
import {NavLink, useLocation} from 'react-router-dom';


const Menu = () => {

    const location = useLocation();

    useEffect(()=> {
        console.log('Location Changed', location);
    }, [location]);

    return (
        <div className="button-group no-gaps">
            <NavLink
                to ="/work-items"
                className={`button ${location.pathname === '/work-items' ? '':'hollow'}`}
            >Work Items</NavLink>
            <NavLink
                to="/settings"
                className={`button ${location.pathname === '/settings' ? '':'hollow'}`}
            >Settings</NavLink>
        </div>
    );

}

export default Menu;

【问题讨论】：

标签： reactjs react-router-dom

【解决方案1】：

您可以使用普通的旧 React，通过使用状态变量来做到这一点，例如：

const Menu = () => {
    const [hasGaps, setHasGaps] = useState(false);
    // call setHasGaps(true/false) based on window.location
    return (
        <div className={`button-group ${hasGaps ? '' : 'no-gaps'}`}>
            <NavLink to="/work-items"><a className="button">Work Items</a></NavLink>
            <NavLink to="/settings"><a className="button">Settings</a></NavLink>
        </div>
    );
}

但是，改用 React Router 的 useParams 钩子会更直接，并将类基于您的路由参数之一。

const Menu = () => {
    const { someParamInYourRoute } = useParams();
    return (
        <div className={`button-group ${someParamInYourRoute ? '' : 'no-gaps'}`}>
            <NavLink to="/work-items"><a className="button">Work Items</a></NavLink>
            <NavLink to="/settings"><a className="button">Settings</a></NavLink>
        </div>
    );
}

附：如果您的逻辑不基于参数，那么还有一个 useLocation 挂钩可用于获取类似 window.location 的对象，您可以类似地基于您的三元组。

【讨论】：

【解决方案2】：

我发现这个解决方案更优雅。原来 inactiveClassName 就是 className！

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

function NavBar() {
    return (
        // Your own code here
        <NavLink className='inactive classes here' activeClassName='active classes here' to='/about'>About</NavLink>
    )
};

export default NavBar

不需要钩子

className=""

始终应用

activeClassName=""

在活动时应用

因此，对于原始问题，请使用以下属性：

className="button"

activeClassName="button hollow"

【讨论】：

我不认为这是真的，className 在活动和非活动时始终应用。