Creando mi navbar en bootstrap usando react, me tope con este pequeño error
En la imagen aparece que Home esta activo pero yo en en codigo no lo tengo activo, es mas work deberia ser el que este activo, no home como se muestra
cuando entro al inspector de elementos esto es lo que me aparece, y en mi codigo esto es lo que tengo escrito:
function App() {
return (
<div>
<nav id="contentNavBar" className="navbar sticky-top navbar-expand-lg navbar-dark bg-dark">
<div className='container-lg'>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav">
<li class="nav-item"><a className='nav-link' href='#home'>Home</a></li>
<li class="nav-item"><a className='nav-link active' href='#Work'>Work</a></li>
</ul>
</div>
</div>
</nav>
<div class='container' data-bs-spy="scroll" data-bs-target="#contentNavBar" data-bs-offset="0" tabindex="0">
<div id='home'>
<Home/>
</div>
<div id='about'>
<About/>
</div>
</div>
</div>
);
}
como se puede notar tengo activado el tag de work no el de home, no entiendo muy bien que esta pasando, saben de alguna forma de arreglarlo?
class=
en lugar declassName
funciona: jsfiddle.net/1x89u4eq ... aparte de eso, si en reactjs es imperativo usarclassName
en lugar declass
te aviso que tienes algunosclass=
en tu código.activeClassName="active"
. Otra opción sería con hooks yuseLocation