更新路由器中的状态变量

Question

我目前正在开发一个 React 站点，我有一个自定义的 HeaderBar 组件，我想在上面显示当前页面标题。我计划只从路由器更新一个状态变量来更改标题。但是，可以理解的是，这会导致“重新渲染过多”错误。

这是我当前的代码：

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、更新状态、再次渲染和再次调用之间循环。

理想情况下，如果您为每个路由定义组件，则需要在 return 语句之外调用 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>
  );
}