Estoy trabajando en una aplicación React con una barra de navegación reutilizable. Quiero que cambie el nombre de la aplicación (en la barra de navegación) cada vez que vaya a una página nueva.
Traté de obtener el nombre de ruta con window.location.pathname y luego quiero establecer un título diferente por nombre de ruta con un estado de uso que paso a la barra de navegación.
Pero aún no funciona. Recibo el error: Demasiadas re-renderizaciones. React limita el número de renderizaciones para evitar un bucle infinito.
¿Alguien me puede ayudar?
in App.js
const [titleApp, setTitleApp] = useState("Home"); switch (window.location.pathname) { case "/": setTitleApp("Home"); break; case "/worklist": setTitleApp("Worklist"); break; case "/analytics": setTitleApp("analytics"); break; default: setTitleApp("Home"); break; } return ( <div className="GlobalDiv"> <Router> <NavBar title={titleApp} /> <div className="MainDiv"> <Switch> <Route exact path="/" component={Springboard} /> <Route exact path="/worklist" component={Worklist} /> <Route path="/analytics" component={AnalyticsDashboard} /> </Switch> </div> </Router> </div> ); } export default App; ```¿Podrías ver si esto funciona?
useEffect(() => { switch (window.location.pathname) { case "/": setTitleApp("Home"); break; case "/worklist": setTitleApp("Worklist"); break; case "/analytics": setTitleApp("analytics"); break; default: setTitleApp("Home"); break; } }, [window.location.pathname]);puedes hacer que funcione con el oyente de historial
https://reactrouter.com/web/api/Hooks/uselocalización
import { useLocation } from 'react-router-dom'; const location = useLocation() React.useEffect(() => { switch (location.pathname) { case "/": setTitleApp("Home"); break; case "/worklist": setTitleApp("Worklist"); break; case "/analytics": setTitleApp("analytics"); break; default: setTitleApp("Home"); break; } }, [location, setTitleApp])o
import { useHistory } from 'react-router-dom' const { listen } = useHistory() React.useEffect(() => { const unlisten = listen((location) => { switch (location.pathname) { case "/": setTitleApp("Home"); break; case "/worklist": setTitleApp("Worklist"); break; case "/analytics": setTitleApp("analytics"); break; default: setTitleApp("Home"); break; } }) return unlisten }, [listen, setTitleApp])