更新 Router 中的状态变量

Question

我目前正在 React 网站上工作，我有一个自定义 HeaderBar 组件，我想在上面显示当前页面标题。我原计划只从路由器更新一个状态变量来更改标题。但是，可以理解的是，这会导致“太多 re-renders”错误。

这是我当前的代码：

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 声明移动到每个路由中，但这对我来说似乎是一个 hackish 解决方案。

有没有更好的方法来解决这个问题？

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

更新 Router 中的状态变量

Update state variable within Router

reactjs

react-router

use-state