基于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>()
}