react路由之间如何通信

使用URL参数传递数据

在React路由中，可以通过URL参数传递数据。使用react-router-dom的useParams钩子获取参数值。定义路由时在路径中设置参数占位符，例如path="/user/:id"。组件内通过const { id } = useParams()读取参数。

通过查询字符串传递数据

利用useLocation和URLSearchParams处理查询字符串。发送方通过history.push({ search: "?key=value" })传递数据，接收方通过const search = new URLSearchParams(location.search)解析。适合传递简单键值对数据。

使用状态管理库共享数据

全局状态管理工具如Redux、MobX或Context API可实现跨路由通信。数据存储在全局状态中，任何路由组件均可订阅和更新。适合复杂应用或频繁交互的场景。

通过路由状态传递对象

history.push的第二个参数可传递状态对象：

history.push("/target", { data: "value" });

接收方通过location.state获取：

const { state } = useLocation();

注意刷新页面后状态会丢失。

使用事件总线或发布订阅模式

创建全局事件发射器，路由组件通过事件监听和触发通信。适用于解耦的组件间通信，但需注意内存泄漏问题。典型实现如EventEmitter或自定义PubSub模式。

通过本地存储中转数据

localStorage或sessionStorage作为中间存储，发送方写入数据，接收方读取。适合需要持久化或页面刷新后仍需保留数据的场景。注意存储大小限制和同步问题。

使用React Refs传递引用

父路由组件通过Ref保存数据，子路由通过props或Context获取Ref引用。适合有明确父子关系的路由结构，可实现直接的方法调用和数据共享。

每种方法各有适用场景，URL参数和查询字符串适合简单数据传递，状态管理适合复杂应用，路由状态适合临时传递，存储方案适合持久化需求。根据具体需求选择最合适的通信方式。