De hecho, soy un poco nuevo en React y todavía estoy aprendiendo, por lo que no puedo entender cómo mostrar mi botón según la página en la que me encuentre actualmente en mi aplicación. Estoy usando el enrutador v6. Este es mi enrutador con mis componentes adentro:
<Router> <Navbar /> <Routes> <Route path="/" element={<HomePage />} /> <Route path="/CountryPage" element={<CountryPage />} /> </Routes> </Router>Esta es mi barra de navegación:
const Navbar = () => { return ( <nav className="navbar-container"> <div> <div> <ul className="navbar"> <li> <Link to="/" className="home"> <AiOutlineLeft /> </Link> </li> <li data-testid="tab-name"> Current Tab </li> <li> <BsFillGearFill className="settings" /> </li> </ul> </div> </div> </nav> ); }; Entonces, todo lo que quiero es mostrar el botón que es <li> <Link to="/" className="home"> <AiOutlineLeft /> </Link> </li> solo si no estoy en la página de HomePage Entonces, si estoy en la página de inicio No quiero mostrar nada.
¿Alguna idea?
window.location.href es un método JS listo para usar que debe usar si no tiene su enrutamiento administrado por alguna biblioteca mejor (como el enrutador de reacción). Además, aquí, en lugar de solo el nombre de la ruta, debe verificar la URL completa . Entonces su código corregido para este método sería
{ window.location.href !=== "yoursubdomian.yourdomain.extension/" && <li> <Link to="/" className="home"> <AiOutlineLeft /> </Link> </li>Mi consejo sería que pruebe un enfoque sistemático utilizando las disposiciones que proporciona React Router.
Use el gancho useLocation() para extraer el nombre de pathname de la ruta actual y verifíquelo para representar el <Link/>
const Navbar = () => { const location = useLocation() return ( <nav className="navbar-container"> <div> <div> <ul className="navbar"> {location.pathname !=="/" && <li> <Link to="/" className="home"> <AiOutlineLeft /> </Link> </li> } <li data-testid="tab-name"> Current Tab </li> <li> <BsFillGearFill className="settings" /> </li> </ul> </div> </div> </nav> ); };