当前位置：首页 > React

react的路由组件如何通信

2026-01-25 09:26:32React

路由组件通信方法

在React应用中，路由组件之间的通信可以通过以下几种方式实现：

使用路由参数 通过URL传递参数是最直接的方式，可以利用react-router-dom的动态路由匹配功能。

react的路由组件如何通信

// 路由配置
<Route path="/user/:id" component={User} />

// 组件中获取参数
const { id } = useParams();

使用查询参数 通过URL的查询字符串传递数据，适合传递多个简单参数。

// 跳转时传递参数
history.push('/search?keyword=react');

// 组件中获取参数
const query = new URLSearchParams(useLocation().search);
const keyword = query.get('keyword');

使用状态管理库 对于复杂的状态共享，可以结合Redux、MobX或Context API。

react的路由组件如何通信

// 创建Context
const UserContext = createContext();

// 提供数据
<UserContext.Provider value={userData}>
  <Routes>...</Routes>
</UserContext.Provider>

// 消费数据
const userData = useContext(UserContext);

使用路由状态 通过history.push的state属性传递对象数据，适合临时数据传递。

// 传递状态
history.push('/result', { data: responseData });

// 接收状态
const { state } = useLocation();
const resultData = state?.data;

使用自定义事件 通过事件总线实现跨组件通信，适用于解耦场景。

// 创建事件总线
const EventBus = new EventEmitter();

// 发送事件
EventBus.emit('dataUpdate', payload);

// 接收事件
useEffect(() => {
  EventBus.on('dataUpdate', handleData);
  return () => EventBus.off('dataUpdate', handleData);
}, []);