反应 NavLink 的 activeClassName 属性不起作用

Question

我一直在尝试使用 NavLink 的 activeClassName 属性为链接/锚点应用某种颜色和背景。但是单击时未显示更改。我在下面附上js和CSS sn-ps

import React from 'react';
import { NavLink } from 'react-router-dom';
import './navbar.css';

const Navbar = () => {
  return (
    <div className='navbar'>
      <div className='navbar__left'>
        <NavLink to='/'>Clubhub</NavLink>
      </div>

      <div className='navbar__right'>
        <NavLink activeClassName='active_link' to='/'>
          Home
        </NavLink>
        <NavLink activeClassName='active_link' to='/membership'>
          Membership
        </NavLink>
        <NavLink activeClassName='active_link' to='/booking'>
          Booking
        </NavLink>
        <NavLink activeClassName='active_link' to='/profile'>
          Profile
        </NavLink>
      </div>
    </div>
  );
};

export default Navbar;

.active_link {
  background-color: #224461;
  color: white;
}

请帮我找出问题所在。 谢谢！

Answer 1

根据react-router docs，

在 React Router v6 中，activeClassName 将被删除，您应该使用 className 函数将类名应用于活动或 非活动的 NavLink 组件。

这是一个更新版本：-

import React from "react";
import { NavLink, BrowserRouter as Router } from "react-router-dom";
import "./navbar.css";

const classNameFunc = ({ isActive }) => (isActive ? "active_link" : "");

const App = () => {
  return (
    <Router>
      <div className="navbar">
        <div className="navbar__left">
          <NavLink to="/">Clubhub</NavLink>
        </div>

        <div className="navbar__right">
          <NavLink className={classNameFunc} to="/">
            Home
          </NavLink>
          <NavLink className={classNameFunc} to="/membership">
            Membership
          </NavLink>
          <NavLink className={classNameFunc} to="/booking">
            Booking
          </NavLink>
          <NavLink className={classNameFunc} to="/profile">
            Profile
          </NavLink>
        </div>
      </div>
    </Router>
  );
};

export default App;

上面的代码在行动：-