使用 React Router 6 将 props 从 outlet 传递到 parent

Question

我正在使用 React Router V6，我想弄清楚我是否可以从使用 Outlet 组件呈现的嵌套路由传递道具。我似乎无法弄清楚。有人可以帮忙吗？

例如试图将标题道具从 BleTable（“蓝牙”）传递给 App

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App title="**Title from outlet**" />} >
          <Route path="ble" element={<BleTable title="Bluetooth"/>}/>
          <Route path="create-user" element={<UserForm/>}/>
        </Route>
      </Routes>

    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

Answer 1

你不能传递道具本身，但你可以为 Outlet 提供上下文值，App 正在呈现路由组件可以通过 useOutletContext hook 访问.

示例：

const AppLayout = () => {
  const [title, setTitle] = useState("");

  return (
    <>
      <h1>App: {title}</h1>
      <Outlet context={{ setTitle }} /> // <-- provide context value
    </>
  )
};

const BleTable = ({ title }) => {
  const { setTitle } = useOutletContext(); // <-- access context value

  return (
    <>
      <h1>BleTable</h1>
      <button type="button" onClick={() => setTitle(title)}>Update App Title</button>
    </>
  );
}

...

<BrowserRouter>
  <Routes>
    <Route path="/" element={<AppLayout />}>
      <Route path="ble" element={<BleTable title="Bluetooth" />} />
      <Route path="create-user" element={<UserForm/>}/>
    </Route>
  </Routes>
</BrowserRouter>

使用 React Router 6 将 props 从 outlet 传递到 parent

Passing props from outlet to parent using React Router 6

reactjs

react-router

react-router-dom