NavLink does not add activeClassName (react-router-dom v5.2.0) - reactjs

Question

I have a small problem with Nav Link.
It doesn't apply active Class Name, although it otherwise works (goes to the desired path, renders the required component)
react-router-dom version 5.2.0
my 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')
);
and 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:
Router works, trouble in NaVLink.
I need to add activeClassName to nav item, but it doesnt.
my 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;
and 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

it fixed by 1 command... (10+ hours of my live)
npm i path-to-regexp#1.7.0 -S

Answer 2

It should already work tho~
Btw, even if you applied those activeClassName. You still need to tweak your code in App.js to something like this:-
need to add Redirect only for the home or / route. If not, the activeClassName will be applied always for home or / route
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>
);
}
You can see this working sandbox
Try to delete the Redirect and see how it changes

Answer 3

As mentioned here in my case solution was replace in webpack
resolve: {
modules: [
path.resolve('./src'),
- path.resolve('./node_modules'),
+ 'node_modules',
],
},