根据使用ReactBootstrap的路由在导航项目上设置活动状态

npm install react-router-dom

yarn add react-router-dom

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

<Link to="/home">Home</Link>
<Link to="/about">About</Link>
<Link to="/contact">Contact</Link>

<Router>
  <Route path="/home" component={Home} />
  <Route path="/about" component={About} />
  <Route path="/contact" component={Contact} />
</Router>

<Link to="/home" className="nav-link">Home</Link>
<Link to="/about" className="nav-link">About</Link>
<Link to="/contact" className="nav-link">Contact</Link>

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

function Navigation() {
  const location = useLocation();

  return (
    <nav>
      <Link to="/home" className={location.pathname === '/home' ? 'nav-link active' : 'nav-link'}>Home</Link>
      <Link to="/about" className={location.pathname === '/about' ? 'nav-link active' : 'nav-link'}>About</Link>
      <Link to="/contact" className={location.pathname === '/contact' ? 'nav-link active' : 'nav-link'}>Contact</Link>
    </nav>
  );
}