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

发布于02月05日

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

我能够在从App执行的Page挂载期间通过navigate("/page", { state: { searchQuery } });发送和接收状态，但不幸的是，当searchQuery的状态改变时，这种方法失败了.

有没有一种简单的机制可以让Page监听Reaction路由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 
    // ...
}

function App() { const [searchQuery, setSearchQuery] = useState<string>(""); return ( // ... <AppBar component="nav"> // Input text field which sets setSearchQuery onChange </AppBar> // ... <Outlet context={searchQuery}> // ... ) }

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

推荐答案

Reactjs相关问答推荐

sourceBuffer. appendBuffer成功，但h5视频播放器卡住了

NextJS(AppRouter)、Apollo(客户端)，在根布局中使用ApolloProvider时出错

Redux向后端发送请求时出现钩子问题

try 在Dockerfile中使用AWS CLI将React构建工件上传到S3时出错

关于同一位置的不同组件实例的react S规则被视为相同组件

为什么我的react虚拟化列表不显示滚动条，除非我确保高度低于rowCount*rowHeight？

捕获表单数据时的Reactjs问题

使用VITE的Reaction应用程序的配置是否正确？

useState导致对函数的无休止调用

Javascript - 正则表达式不适用于 MAC OS - 编码？

React Context API 在 Next.js 中更改路由时获取默认数据

提前输入错误：选项类型上不存在属性名称

无法通过react 路由中的链接传递信息

React中的功能性组件克隆优化

为什么这个 React 组件会导致无限渲染？

React 组件列表中的第一个计时器正在获取值 NaN

使用登录保护 React 中的 SPA 应用程序 - 为什么这种方法不起作用？

条件渲染元素的测试不起作用

无法在 reactJS 中使用空包装器 <>

错误(未捕获的类型错误)：无法读取未定义的属性(读取参数)