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

user_14769136 0
Viewed 993

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;
react-router-dom react-router reactjs
3 Answers

it fixed by 1 command... (10+ hours of my live)

npm i path-to-regexp@1.7.0 -S

user_147691360

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

user_129968550

As mentioned here in my case solution was replace in webpack

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