使用 React Router v6 监听来自不同组件的组件状态变化答案

【问题标题】：Listening to component's state change from different component using React Router v6使用 React Router v6 监听来自不同组件的组件状态变化
【发布时间】：2023-02-05 21:31:23
【问题描述】：

我有一个 Page 组件，它使用 </Outlet> 在 App 中呈现。在 Page 组件中，我想使用在 App 中设置的状态（通过搜索 input 提供的简单文本）。

在Page安装期间，我能够通过App执行的navigate("/page", { state: { searchQuery } });发送和接收状态，但不幸的是，当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 
    // ...
}

【问题讨论】：

标签： reactjs react-hooks react-router

【解决方案1】：

您可以使用出口上下文来做到这一点：

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

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

import { useOutletContext } from 'react-router-dom';

function Page() {
  const searchQuery = useOutletContext();

  return (
    // ...
    // usage of a App searchQuery 
    // ...
  )
}

有关详细信息，请参阅此文档：https://reactrouter.com/en/6.8.0/hooks/use-outlet-context

【讨论】：