I am working on a React app with a reusable navbar. I want the App name (in the navbar) to change, every time I go to a new page.
I tried to get the pathname with window.location.pathname and then I want to set a different title per pathname with a useState that I pass down to the navbar.
But it doesn't work yet. I get the error: Too many re-renders. React limits the number of renders to prevent an infinite loop.
Can someone help me out?
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; ```
Could you see if this works,
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]);
you can make it work with history listener
https://reactrouter.com/web/api/Hooks/uselocation
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])
or
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])