使用 React Router 6 将 props 从出口传递到父级

Question

我正在使用 React Router V6，我试图弄清楚是否可以从使用Outlet组件渲染的嵌套路由传递 props。但我似乎无法弄清楚。有人可以帮忙吗？

例如，尝试将标题道具从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

您本身无法传递 props，但您可以向Outlet正在App渲染的路由组件可以通过 useOutletContexthook访问的上下文值提供上下文值。

例子：

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>