Question

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

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

希望您可以解决这个问题，我在互联网上进行了搜索，但是找不到我的问题，我尝试在navlink中的路线中应用确切的设置，我也尝试使用activeStyle，但对我来说不起作用。 ..

Answer 1

也许pshrmn对this的react-router问题的评论GitHub线程会有所帮助。它对我有帮助，现在activeClassName在NavLink上正常工作。

安装webpack和webpack-cli： npm install --save-dev webpack --save-dev webpack-cli
运行npx webpack-cli init在您的根目录中创建一个webpack.config.js文件。此处更多信息：https://webpack.js.org/configuration/ ...并且要小心，不要让它覆盖您的src / index.js。
重置依赖项：

删除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} />

反应NavLink activeClassName不起作用

1 个答案: