当前位置：首页 > React

react两个页面之间如何通讯

2026-01-26 04:03:17React

跨页面通信方法

使用URL参数传递数据 在React中可以通过路由的URL参数或查询字符串传递数据。使用react-router-dom的useNavigate和useLocation钩子实现。

// 页面A: 传递数据
import { useNavigate } from 'react-router-dom';
function PageA() {
  const navigate = useNavigate();
  const sendData = () => {
    navigate('/pageB?data=example');
  };
  return <button onClick={sendData}>跳转到PageB</button>;
}

// 页面B: 接收数据
import { useLocation } from 'react-router-dom';
function PageB() {
  const location = useLocation();
  const searchParams = new URLSearchParams(location.search);
  const data = searchParams.get('data');
  return <div>接收到的数据: {data}</div>;
}

使用状态管理库 Redux或Context API可以实现全局状态共享，适合复杂应用场景。

react两个页面之间如何通讯

// 使用Redux示例
// store.js
import { createStore } from 'redux';
const initialState = { sharedData: null };
function reducer(state = initialState, action) {
  switch(action.type) {
    case 'SET_DATA':
      return { ...state, sharedData: action.payload };
    default:
      return state;
  }
}
export const store = createStore(reducer);

// 页面A: 设置数据
import { useDispatch } from 'react-redux';
function PageA() {
  const dispatch = useDispatch();
  const sendData = () => {
    dispatch({ type: 'SET_DATA', payload: 'example' });
  };
  return <button onClick={sendData}>设置共享数据</button>;
}

// 页面B: 获取数据
import { useSelector } from 'react-redux';
function PageB() {
  const sharedData = useSelector(state => state.sharedData);
  return <div>共享数据: {sharedData}</div>;
}

使用浏览器存储 localStorage或sessionStorage适合需要持久化或临时存储的场景。

react两个页面之间如何通讯

// 页面A: 存储数据
function PageA() {
  const storeData = () => {
    localStorage.setItem('sharedData', 'example');
  };
  return <button onClick={storeData}>存储数据</button>;
}

// 页面B: 读取数据
function PageB() {
  const data = localStorage.getItem('sharedData');
  return <div>存储的数据: {data}</div>;
}

使用事件总线 自定义事件系统可以实现解耦的通信方式。

// eventBus.js
export const eventBus = {
  listeners: {},
  emit(event, data) {
    if (this.listeners[event]) {
      this.listeners[event].forEach(callback => callback(data));
    }
  },
  on(event, callback) {
    if (!this.listeners[event]) this.listeners[event] = [];
    this.listeners[event].push(callback);
  }
};

// 页面A: 触发事件
import { eventBus } from './eventBus';
function PageA() {
  const sendEvent = () => {
    eventBus.emit('dataEvent', { message: 'Hello' });
  };
  return <button onClick={sendEvent}>发送事件</button>;
}

// 页面B: 监听事件
import { useEffect } from 'react';
import { eventBus } from './eventBus';
function PageB() {
  useEffect(() => {
    const handleEvent = data => {
      console.log('收到数据:', data);
    };
    eventBus.on('dataEvent', handleEvent);
    return () => eventBus.off('dataEvent', handleEvent);
  }, []);
  return <div>事件监听组件</div>;
}

使用window.postMessage 适用于跨窗口或iframe通信的场景。

// 父窗口发送消息
function ParentWindow() {
  const sendMessage = () => {
    window.frames[0].postMessage('Hello from parent', '*');
  };
  return <button onClick={sendMessage}>发送消息</button>;
}

// 子窗口接收消息
function ChildWindow() {
  useEffect(() => {
    const handleMessage = event => {
      console.log('收到消息:', event.data);
    };
    window.addEventListener('message', handleMessage);
    return () => window.removeEventListener('message', handleMessage);
  }, []);
  return <div>消息接收方</div>;
}