更新路由器内的状态变量

Question

我目前正在一个React网站上工作，我有一个自定义的HeaderBar组件，我想在其上显示当前页面标题。我原计划只是从Router中更新一个状态变量来更改标题。然而，可以理解的是，这会导致"太多的重新渲染"。错误。

下面是我当前的代码:

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>
);
}

显然，我可以将HeaderBar声明移动到每个路由中，但这对我来说似乎是一个粗俗的解决方案。

有更好的方法来做这件事吗?

Answer 1

当调用JSX内部的函数时，这些函数在每次渲染中执行，这将导致在每次渲染中执行3个setPageTitle调用(尽管在您的情况下，只有第一个setPageTitle将被调用，从而导致太多的更新，因为它将在调用第一个setPageTitle，更新状态，再次渲染和再次调用之间循环)。

理想情况下，如果您为每个路由定义组件，则需要在返回语句之外调用setPageTitle(即在呈现之前在JSX之外)，这将导致仅在访问相应路由时才调用setPageTitle。

为了做到这一点而不需要为你的路由定义组件，你可以这样做:

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>
);
}