在react框架下的子路由嵌套传参方法

32 阅读1分钟

基于react框架开发的页面有时候需要在页面内嵌套子路由,比如

<Routes>
  <Route path="/" element={<Layout />}>
    <Route index element={<Main />} />
    <Route path="/details" element={<Details />} />
  </Route>
</Routes>

这样的情况。 有可能内层组件需要使用外层组件中的数据,react提供了在路由嵌套中传递参数的方法

// Layout.tsx
// 路由入口
<Outlet context={[param]} />
// Main.tsx
const Main = () => {
    const param = useOutletContext<string>()
}