NavLink不添加activeClassName（react-router-dom v5.2.0）

Question

我对导航链接有一个小问题。它不应用活动的类名，尽管它在其他方面可以工作（转到所需的路径，呈现所需的组件）

react路由器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')
); 

和my 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; 

UPD：路由器工作，在NaVLink的麻烦。我需要添加activeClassName到nav项目，但它没有。

我的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

正如在我的案例中提到的，解决方案是在webpack中替换

resolve: {
    modules: [
      path.resolve('./src'),
-     path.resolve('./node_modules'),
+    'node_modules',
    ],
  },

Answer 2

它应该已经工作了~

顺便说一句，即使你应用了那些activeClassName。您仍然需要将App.js中的代码调整为如下内容：-

>

只需为主页或/路线添加重定向。如果不是，则activeClassName将始终应用于home或/路由

App.js：-

export default function App() {
  return (
    <Router>
      <Nav />
      <Switch>
        {/* Add this Redirect */}
        <Redirect exact from="/" to="/home" />
        <Route path="/home" component={() => "Home page"} />
        <Route path="/demo" component={() => "Demo page"} />
        <Route path="/demo2" component={() => "Demo2 page"} />
      </Switch>
    </Router>
  );
}

你可以看到这个工作沙盒尝试删除重定向，看看它是如何变化的

Answer 3

它由一个命令修复...（我活了10个小时）

npm i到的路径-regexp@1.7.0-S