Reactjs как переключить класс на неактивный маршрут?

Question

Это мое самое первое приложение reactjs (долгое время Angular dev, желающий увидеть, как выглядит другая сторона). Я хочу добавить «пустой» класс по неактивной ссылке. Я использую 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;

Как бы я это сделал? Я вижу, что Reaction-router-dom имеет свойство activeClassName в NavLink, но не свойство inactiveClassName?

РЕДАКТИРОВАТЬ: я хочу динамически добавить "полый" класс на inactiveRoute в <a> внутри <NavLink>. В приведенном ниже коде маршрут рабочих элементов неактивен.

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;

Answer 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>
    );
}

PS Если ваша логика c не основана на параметре, есть также перехватчик useLocation, который вы используете чтобы получить window.location -подобный объект, на котором вы могли бы аналогичным образом основать свою троицу.