我有一个Page组件，它在App中使用</Outlet>呈现。在Page组件中，我想使用一个在App中设置的状态（通过搜索input提供的简单文本）。
我能够通过从App执行的navigate("/page", { state: { searchQuery } });在Page挂载期间发送和接收状态，但不幸的是，当searchQuery的状态发生变化时，这种方法失败了。
是否有一种简单的机制允许Page侦听React Router v6中App selectQuery状态的更改？如果有，解决方案是什么？

// index.tsx
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<App />}>
      <Route path="page" element={<Page />}></Route>
    </Route>
  )
);

// App.tsx 
function App() {
  const [searchQuery, setSearchQuery] = useState<string>("");

  return (
    // ...
    <AppBar component="nav">
      // Input text field which sets setSearchQuery onChange
    </AppBar>
    // ...
      <Outlet />
    // ...
}

// Page.tsx
function Page() {
  //...
  return (
    // ...
    // usage of a App searchQuery 
    // ...
}