Блог

У меня есть панель навигации с его ссылками navlinks, я хочу изменить цвет, когда какая-либо ссылка navlink активна, но я не знаю, почему это невозможно сделать.

Класс, который должен применяться, когда я нахожусь в navlink, никогда не отображается.

Вот код из 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>
  

И вот мой маршрутизатор:

         <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 amp;amp; !apellidos amp;amp;
                                <React.Fragment>{nombre}</React.Fragment>
                            }
                            {
                                nombre amp;amp; apellidos amp;amp;
                                <React.Fragment>{nombre} {apellidos}</React.Fragment>
                            }
                        </h2>
                    </div>
                    );
                }
                } />

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

Надеюсь, вы сможете мне помочь с этой проблемой, я сделал поиск в Интернете, но не могу найти свою проблему, я попытался применить exact в маршрутах, в navlink, я тоже пробовал с activeStyle, но у меня это не сработало…

Возможно pshrmn , комментарий по этому вопросу о проблемах с реактивным маршрутизатором поможет. Это помогло мне, и теперь activeClassName корректно работает в NavLink.

1. Установите webpack и webpack-cli: npm install --save-dev webpack --save-dev webpack-cli

2. Запустите npx webpack-cli init , чтобы создать webpack.config.js файл в вашем корневом каталоге. Дополнительная информация здесь: https://webpack.js.org/configuration / … и будьте осторожны, не позволяйте ему перезаписывать ваш src/index.js .

3. Сбросьте ваши зависимости:

• Удалить package.json.lock … (НЕТ package.json )
• Удалить webpack из dependencies и devDependencies в package.json
• Удалите node_modules каталог из вашего корневого каталога
• Выполнить npm install

Это устранило проблему для меня! : D

P.S, вы можете упростить

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

Для

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