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} />}
/>