Активная вкладка меню в ReactJS

Question

Как правильнее всего подсветить активную вкладку меню навигации в Реакте с функциональным подходом? Интересует оптимальный метод с учетом того что "линков" может быть не 2, а 20... Как сделать оптимальней всего без дублирования кода?

import React from 'react';
import './styles/styles.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Route } from "react-router-dom";

import Navbar from './components/Navbar';
import Profile from './components/Profile';
import Dialogs from './components/Dialogs';


const App = (props) => {

  return (
    <BrowserRouter>
        <div className="app-wrapper">
          <Navbar/>
          <>
            <Route path='/dialogs' component={Dialogs}/>
            <Route path='/profile' component={Profile}/>
          </>
        </div>
    </BrowserRouter>
  )

}

export default App;

import React from 'react';
import { Link } from "react-router-dom";

const Navbar = () => {
    return (
        <>
            <ul className="nav justify-content-center">
                <li className="nav-item">
                    <Link to='/dialogs' className="nav-link">Dialogs</Link>
                </li>
                <li className="nav-item">
                    <Link to='/profile' className="nav-link">Profile</Link>
                </li>
            </ul>
        </>
    )
}

export default Navbar;

Answer 1

Оптимальный вариант использовать NavLink с activeClassName

Answer 2

Заменил <Link> на <NavLink>, добавил activeClassName={"nav-link-selected"} и задал классу .nav-link-selected необходимый стиль (в моем случае font-weight: bold) - работает корректно.

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

const Navbar = () => {

    return (
        <>
            <ul className="nav justify-content-center">
                <li className="nav-item">
                    <NavLink to='/dialogs' className="nav-link" activeClassName={"nav-link-selected"}>Dialogs</NavLink>
                </li>
                <li className="nav-item">
                    <NavLink to='/profile' className="nav-link" activeClassName={"nav-link-selected"}>Profile</NavLink>
                </li>
            </ul>
        </>
    )
}

export default Navbar;

БЛОГ НА HUSL

Активная вкладка меню в ReactJS

Ответы (2 шт):