reactjs - NavLink 不添加 activeClassName (react-router-dom v5.2.0)

Question

我有一个关于 Nav Link 的小问题。它不应用事件的类名，尽管它在其他方面有效(转到所需的路径，呈现所需的组件)

react-router-dom 版本 5.2.0

我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './components/App';

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter> 
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
); 

和我的 Navigation.js:

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

function Navigation() {
  return (
    <nav className="navigation">
      <ul className="navigation__list">
        <li>
          <NavLink to="/" activeClassName="navigation__item_active" className="navigation__item">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/frontend" className="navigation__item" activeClassName="navigation__item_active">
            frontend
          </NavLink>  
        </li> 
        <li>
          <NavLink to="/about" className="navigation__item" activeClassName="navigation__item_active">
            about
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation; 

更新:路由器工作正常，NaVLink 出现问题。我需要将 activeClassName 添加到导航项，但它没有。

我的 App.js:

import React from 'react';
import Header from './Header';
import Footer from './Footer';
import Main from './Main';

function App() {
  return (
    <div className="App">
      <Header/>
      <Main/>
      <Footer/>
    </div>
  );
}

export default App; 

和 Main.js:

import React from 'react';
import { Route } from 'react-router-dom';
import HelloPage from './Hello-page';
import About from './About';
import Frontend from './Frontend';
import Navigation from './Navigation';

function Main() {
  return (
    <main className="main">
      <Route exact path="/">
        <HelloPage/>
      </Route>
      <Route path="/about">
        <About/>
      </Route>
      <Route path="/frontend">
        <Frontend/>
      </Route>
      <Navigation/>
    </main>
  );
}

export default Main; 

Answer 1

它由 1 个命令修复...(我的生活超过 10 小时)

npm i path-to-regexp@1.7.0 -S