react页面之间传数据方法

React页面间数据传递的5种常用方法详解

导语

在React应用开发中，组件间的数据传递是核心功能之一。特别是当我们需要在不同页面(路由)之间共享数据时，选择合适的数据传递方式尤为重要。本文将详细介绍React中五种常用的页面间数据传递方法，包括它们的实现原理、适用场景和实际代码示例，帮助开发者在不同场景下做出合理选择。

核心概念解释

React页面间数据传递主要解决的是跨组件通信问题，特别是在路由切换时保持或传递数据状态。传统props方式在跨路由场景下存在局限性，因此需要其他补充方案。

五种常用方法及实战案例

1. URL参数传递

通过路由URL的query或params传递简单数据，适合少量非敏感数据。

// 传递数据
import { useNavigate } from 'react-router-dom';

function PageA() {
  const navigate = useNavigate();

  const sendData = () => {
    navigate('/pageB?name=张三&id=123');
    // 或者使用path变量
    // navigate('/pageB/123');
  };

  return <button onClick={sendData}>跳转到PageB</button>;
}

// 接收数据
import { useLocation, useParams } from 'react-router-dom';

function PageB() {
  const location = useLocation();
  const params = useParams(); // 如果使用path变量

  // 获取query参数
  const query = new URLSearchParams(location.search);
  const name = query.get('name');
  const id = query.get('id');

  return <div>接收到的数据：{name}, {id}</div>;
}

优缺点： - ✅ 简单直接，可分享链接 - ❌ 只适合简单数据，URL长度有限制

2. 路由state传递

利用React Router的state属性，可在导航时附加任意数据。

// 发送数据
function PageA() {
  const navigate = useNavigate();

  const sendData = () => {
    navigate('/pageB', {
      state: {
        user: { name: '李四', age: 25 },
        timestamp: Date.now()
      }
    });
  };

  return <button onClick={sendData}>跳转到PageB</button>;
}

// 接收数据
function PageB() {
  const location = useLocation();
  const { user, timestamp } = location.state || {};

  return (
    <div>
      <p>用户：{user?.name}</p>
      <p>时间：{timestamp && new Date(timestamp).toLocaleString()}</p>
    </div>
  );
}

优缺点： - ✅ 支持复杂对象，不会暴露在URL中 - ❌ 刷新页面后state会丢失

3. 全局状态管理（Redux）

适合复杂应用中的跨组件数据共享。

// store.js
import { configureStore } from '@reduxjs/toolkit';

const initialState = {
  user: null,
  token: ''
};

function appReducer(state = initialState, action) {
  switch(action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    default:
      return state;
  }
}

export const store = configureStore({ reducer: appReducer });

// PageA.js
import { useDispatch } from 'react-redux';

function PageA() {
  const dispatch = useDispatch();
  const navigate = useNavigate();

  const sendData = () => {
    dispatch({
      type: 'SET_USER',
      payload: { name: '王五', role: 'admin' }
    });
    navigate('/pageB');
  };

  return <button onClick={sendData}>跳转到PageB</button>;
}

// PageB.js
import { useSelector } from 'react-redux';

function PageB() {
  const user = useSelector(state => state.user);

  return <div>当前用户：{user?.name}</div>;
}

优缺点： - ✅ 集中管理，适合大型应用 - ❌ 增加项目复杂度，学习成本较高

4. Context API

适合中等规模应用，避免props层层传递。

// UserContext.js
import { createContext, useContext, useState } from 'react';

const UserContext = createContext();

export function UserProvider({ children }) {
  const [user, setUser] = useState(null);

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

export function useUser() {
  return useContext(UserContext);
}

// PageA.js
function PageA() {
  const { setUser } = useUser();
  const navigate = useNavigate();

  const sendData = () => {
    setUser({ name: '赵六', email: 'zhao@example.com' });
    navigate('/pageB');
  };

  return <button onClick={sendData}>跳转到PageB</button>;
}

// PageB.js
function PageB() {
  const { user } = useUser();

  return <div>用户邮箱：{user?.email}</div>;
}

优缺点： - ✅ 避免prop drilling，使用相对简单 - ❌ 频繁更新可能导致性能问题

5. 本地存储（localStorage/sessionStorage）

适合需要持久化的数据，如用户偏好设置。

// PageA.js
function PageA() {
  const navigate = useNavigate();

  const sendData = () => {
    const settings = { theme: 'dark', language: 'zh' };
    localStorage.setItem('appSettings', JSON.stringify(settings));
    navigate('/pageB');
  };

  return <button onClick={sendData}>跳转到PageB</button>;
}

// PageB.js
function PageB() {
  const [settings, setSettings] = useState({});

  useEffect(() => {
    const data = localStorage.getItem('appSettings');
    if (data) setSettings(JSON.parse(data));
  }, []);

  return <div>当前主题：{settings.theme}</div>;
}

优缺点： - ✅ 数据持久化，跨会话可用 - ❌ 有大小限制，安全性较低

方法选择指南

方法	适用场景	数据大小	持久性	复杂度
URL参数	简单数据，需要分享的链接	小	高	低
路由state	中等数据，单次导航传递	中	低	中
Redux	复杂应用，全局状态管理	大	高	高
Context API	中等规模应用，避免prop drilling	中	中	中
本地存储	需要持久化的用户偏好设置	中	高	低

小结

在React应用中，页面间数据传递有多种实现方式，各有优缺点。对于简单场景，URL参数和路由state是最轻量的解决方案；当应用复杂度增加时，Context API和Redux能提供更好的状态管理；而需要持久化的数据则可以考虑本地存储。实际开发中，通常会组合使用多种方式以满足不同需求。理解每种方法的适用场景，才能做出最合理的技术选型。