如何在React中动态改变每个页面的页眉属性？

// 页眉组件
function Header(props) {
  return (
    <header>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </header>
  );
}

// 页面组件
function HomePage() {
  return (
    <div>
      <Header title="首页" description="欢迎访问首页" />
      {/* 页面内容 */}
    </div>
  );
}

function AboutPage() {
  return (
    <div>
      <Header title="关于我们" description="了解更多关于我们的信息" />
      {/* 页面内容 */}
    </div>
  );
}

// 在路由组件中监听路由变化的事件
function App() {
  useEffect(() => {
    // 根据当前页面的路由信息更新页眉属性
    // ...
  }, []);

  return (
    <Router>
      <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/about" component={AboutPage} />
        {/* 其他页面 */}
      </Switch>
    </Router>
  );
}