Update state variable within Router - reactjs

Question

I'm currently working on a React site, and I have a custom HeaderBar component, and I would like to display the current page title on it. I had planned to just update a state variable from the Router to change the title. However, understandably, this results in a "too many re-renders" error.
Here's my current code:
function App() {
const [pageTitle, setPageTitle] = useState("")
return (
<div>
<Router>
<HeaderBar siteTitle="My Website Name" pageTitle={pageTitle} />
<Switch>
<Route path="/login">
{setPageTitle("Login")}
<h1>Login Page</h1>
</Route>
<Route path="/main">
{setPageTitle("Main")}
<h1>Main Page</h1>
</Route>
<Route path="/about">
{setPageTitle("About")}
<h1>About Page</h1>
</Route>
</Switch>
</Router>
</div>
);
}
Obviously I could just move the HeaderBar declaration inside each of the Routes, but this seems like a hackish solution to me.
Is there a better way to go about this?

Answer 1

When calling functions inside JSX, these functions are executed on every render, which would results on the 3 setPageTitle calls being executed on every render (although in your case, only the first setPageTitle is going to be called thus resulting in the too many updates as it would be cycling between calling the first setPageTitle, updating the state, rendering again, and calling it once again).
Ideally, if you define components for each route, you would need to call setPageTitle outside of the return statement (meaning outside of the JSX, before rendering), which would result in the setPageTitle being called only when you access the corresponding route.
In order to do that without defining components for your routes, you could do the following:
function App() {
const [pageTitle, setPageTitle] = useState("")
return (
<div>
<Router>
<HeaderBar siteTitle="My Website Name" pageTitle={pageTitle} />
<Switch>
<Route path="/login" render={() => {
setPageTitle("Login");
return (<h1>Login Page</h1>);
}}>
</Route>
<Route path="/main" render={() => {
setPageTitle("Main");
return (<h1>Main Page</h1>);
}}>
</Route>
<Route path="/about" render={() => {
setPageTitle("About");
return (<h1>About Page</h1>);
}}>
</Route>
</Switch>
</Router>
</div>
);
}