reactjs - 使用 React Router 6 将 props 从 outlet 传递给 parent

Question

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

例如试图将标题 Prop 从 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 本身，但你可以向 App 正在渲染的 Outlet 提供上下文值，路由组件可以通过 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>