Me gustaría configurar mi encabezado para mostrar dinámicamente el título de la página actual. Por ejemplo, cuando salto al componente AvailableData, me gustaría que mi componente de encabezado muestre "Datos disponibles".
en App.js configuré un enrutador:
<Route exact path = "/" component= { AvailableData } /> ...y uso el componente Navbar para moverme entre páginas
<div className="app-navigation"> <ul> <li className="lnk-icon" > <NavLink to="/available-data" activeClassName="active"> <img src="img/bookmark.svg" alt="Available data" />Available data</NavLink> </li> ...dentro del encabezado, se debe mostrar el nombre de la página actual
<div className="app-header"> <div className="app-header__title"> {title} <-- Here </div>Puede usar el gancho useLocation() y, según la ruta actual, mostrar el nombre esperado.
Por ejemplo, en su componente de encabezado
import { useLocation } from "react-router-dom"; const Header = () => { const location = useLocation(); const getCurrentTitle = () => { switch (location.pathname) { case "/": default: return "Home page"; case "/available-data": return "Available data"; } }; return ( <div className="app-header"> <div className="app-header__title"> {getCurrentTitle()} </div> </div> ); }