react路由如何实现父子通信
路由参数传递
在父组件中通过路由参数传递数据给子组件。父组件通过<Link>或history.push传递参数，子组件通过useParams或props.match.params获取参数。
// 父组件传递参数
<Link to={`/child/${data}`}>跳转</Link>
// 或
history.push(`/child/${data}`);
// 子组件获取参数
const { data } = useParams();
// 或
const { data } = props.match.params;状态提升
将状态提升到共同的父组件中，通过props传递给子组件。父组件定义状态和修改状态的方法，子组件通过props接收和调用。
// 父组件
const [state, setState] = useState('');
<ChildComponent state={state} setState={setState} />
// 子组件
const { state, setState } = props;Context API
使用React的Context API实现跨组件通信。创建Context后，父组件作为Provider提供数据，子组件通过useContext消费数据。
// 创建Context
const MyContext = createContext();
// 父组件提供数据
<MyContext.Provider value={{ data, setData }}>
<ChildComponent />
</MyContext.Provider>
// 子组件消费数据
const { data, setData } = useContext(MyContext);自定义事件
通过自定义事件实现通信。父组件定义事件并暴露给子组件，子组件触发事件时父组件执行相应逻辑。
// 父组件
const handleEvent = (data) => {
console.log(data);
};
<ChildComponent onEvent={handleEvent} />
// 子组件
props.onEvent(data);路由渲染属性
利用路由的render或children属性直接传递props给子组件。在路由配置中通过render方法将父组件的props传递给子组件。
<Route
path="/child"
render={(props) => <ChildComponent {...props} parentProps={data} />}
/>
