React18中在有路由的情况下父组件如何给子组件传递数据？

在 React 18 中，当项目使用路由（如 React Router v6+）时，父组件向子组件传递数据的方式主要取决于组件之间的关系（是否为路由直接渲染的组件），常见方式如下：

一、若子组件是通过路由直接渲染的（路由组件）

此时子组件由 <Route> 渲染（如 <Route path="/child" element={<Child />}），父组件（通常是路由的祖先组件，如 App 组件）无法直接通过 props 传递数据，需通过以下方式：

1、使用 useOutletContext（React Router 推荐）

React Router v6+ 提供了 useOutletContext 用于在路由层级中传递数据，适合父子路由间通信。

父组件（路由配置处）：

在渲染子路由的 <Outlet> 组件中通过 context 属性传递数据。

// 父组件（如 App.js）
import { Outlet } from 'react-router-dom';function Parent() {const data = { name: "父组件数据", id: 123 };return (<div>{/* 通过 Outlet 的 context 传递数据给子路由组件 */}<Outlet context={data} /></div>);
}

子组件（路由组件）：

使用 useOutletContext 接收父组件传递的数据。

// 子组件（Child.js）
import { useOutletContext } from 'react-router-dom';function Child() {// 接收父组件通过 Outlet 传递的 contextconst parentData = useOutletConte