React NavLink activeClassName not working

Question

I have a navbar with his navlinks, i want to change the color when some navlink is active but i do not know why is being imposible to do it.

The class that should be applied when i am in a navlink never shows up.

Here is the code from the Nav:

<nav id="menu">
                    <ul>
                        <li>
                            <NavLink to="/home" activeClassName="active">Inicio</NavLink>
                        </li>
                        <li>
                            <NavLink to="/ruta-prueba" activeClassName="active">Blog</NavLink>
                        </li>
                        <li>
                            <NavLink to="/segunda-ruta"  activeClassName="active">Formulario</NavLink>
                        </li>
                        <li>
                            <NavLink to="/pagina-1"  activeClassName="active">Pagina 1</NavLink>
                        </li>
                        <li>
                            <NavLink to="/pruebas/Tomi/Faroles"  activeClassName="active">Pagina 2</NavLink>
                        </li>
                    </ul>
                </nav>

And here my Router:

        <BrowserRouter>
            <Header />
            <Slider
                title="Welcome"
                btn={buttonString} />
            
            <div className="center">
            {/* CONFIGURAR RUTAS Y PÁGINAS */}
            <Switch>
                <Route exact={true} path="/" component={Peliculas} />
                <Route path="/home" component={Peliculas} />
                <Route path="/ruta-prueba" component={SeccionPruebas} />
                <Route path="/segunda-ruta" component={MiComponente} />

                <Route path="/pagina-1" render={() => (
                    <React.Fragment>
                        <h1>Hola mundo desde la ruta: PAGINA 1</h1>
                        <MiComponente saludo="Hola Venom" />
                    </React.Fragment>
                )} />

                <Route path="/pruebas/:nombre/:apellidos?" render={(props) => {
                    var nombre = props.match.params.nombre;
                    var apellidos = props.match.params.apellidos;

                    return (<div id="content">
                        <h1>Página de pruebas</h1>
                        <h2>
                            {nombre && !apellidos &&
                                <React.Fragment>{nombre}</React.Fragment>
                            }
                            {
                                nombre && apellidos &&
                                <React.Fragment>{nombre} {apellidos}</React.Fragment>
                            }
                        </h2>
                    </div>
                    );
                }
                } />

                <Route component={Error} />
            </Switch>
            <Sidebar />
    <div className="clearfix"></div>
    </div>
  <Footer/>
        </BrowserRouter>

Hope you can help me with this problem I did a search in internet but a can not find my problem, i tried applying exact in the routes, in the navlink, i tried too with activeStyle but it do not worked for me...

Answer 1

Maybe pshrmn 's comment on this react-router issues GitHub thread will help. It helped me and now the activeClassName is working correctly on the NavLink.

1. Install webpack and webpack-cli: npm install --save-dev webpack --save-dev webpack-cli

2. Run npx webpack-cli init to create a webpack.config.js file in your root directory. More info here: https://webpack.js.org/configuration/ ... and be careful, don't let it overwrite your src/index.js.

3. Reset your dependencies:

• Delete package.json.lock ... ( NOT package.json )
• Remove webpack from dependencies and devDependencies in package.json
• Delete the node_modules directory from your root directory
• Run npm install

Doing this fixed the issue for me! :D

PS, you can simplify

<Route exact={true} path="/" component={Peliculas} />

to

<Route exact path="/" component={Peliculas} />