时间戳

首页 > 解决方案 > React NavLink activeClassName 不起作用

javascript - React NavLink activeClassName 不起作用

问题描述

我有一个带有他的导航链接的导航栏，我想在某些导航链接处于活动状态时更改颜色，但我不知道为什么不可能这样做。

当我在导航链接中时应该应用的类永远不会出现。

这是来自导航的代码：

<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 && !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>

希望你能帮我解决这个问题我在互联网上进行了搜索，但找不到我的问题，我尝试在路线中应用精确，在导航链接中，我也尝试使用 activeStyle，但它对我不起作用......

标签： javascriptcssreactjsroutesreact-router

解决方案

也许pshrmn对这个react-router 问题的评论 GitHub 线程会有所帮助。它帮助了我，现在 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

PS，你可以简化

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

至

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

推荐阅读