ReactJS中如何在页面间链接并传递数据？（不使用render方法）

1. 通过路由state传递完整数据 #

直接在navigate方法中附加state参数，可传递完整数据对象，适合数据量不大的场景：

const navigate = useNavigate();
const onClick = () => {
  navigate('/pageIGoTo', {
    state: { data: variable } // 传入API获取的完整数据
  });
};

目标页面接收数据：

import { useLocation } from 'react-router-dom';

const TargetPage = () => {
  const location = useLocation();
  const receivedData = location.state?.data;
  
  return <div>{receivedData?.name}</div>;
};

2. 全局状态管理（Context API） #

适合跨多页面共享数据，无需每次跳转重复传递：

1. 创建数据Context：

import { createContext, useContext, useState } from 'react';

const DataContext = createContext();

export const DataProvider = ({ children }) => {
  const [apiData, setApiData] = useState(null);
  
  return (
    <DataContext.Provider value={{ apiData, setApiData }}>
      {children}
    </DataContext.Provider>
  );
};

export const useData = () => useContext(DataContext);

2. 根组件包裹DataProvider：

import { DataProvider } from './DataContext';
import { BrowserRouter } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <DataProvider>
        {/* 路由及页面组件 */}
      </DataProvider>
    </BrowserRouter>
  );
}

3. 源页面存入API数据：

import { useData } from './DataContext';

const SourcePage = () => {
  const { setApiData } = useData();
  const navigate = useNavigate();
  
  const fetchData = async () => {
    const res = await fetch('你的API地址');
    const data = await res.json();
    setApiData(data); // 存入全局状态
    navigate('/pageIGoTo');
  };
  
  return <button onClick={fetchData}>跳转</button>;
};

4. 目标页面读取全局数据：

import { useData } from './DataContext';

const TargetPage = () => {
  const { apiData } = useData();
  
  return <div>{apiData?.id}</div>;
};

3. 本地存储（localStorage/sessionStorage） #

适合需要持久化数据的场景，注意存储JSON格式：

const navigate = useNavigate();
const onClick = () => {
  localStorage.setItem('apiData', JSON.stringify(variable));
  navigate('/pageIGoTo');
};

目标页面读取并清理：

import { useEffect } from 'react';

const TargetPage = () => {
  const receivedData = JSON.parse(localStorage.getItem('apiData'));
  
  useEffect(() => {
    // 页面卸载时清除存储，避免残留
    return () => localStorage.removeItem('apiData');
  }, []);
  
  return <div>{receivedData?.id}</div>;
};

4. 传递ID后重新请求API #

先排查路由配置是否正确，确保目标页面路由定义为/pageIGoTo/:id：

// 路由配置示例
import { Routes, Route } from 'react-router-dom';

<Routes>
  <Route path="/pageIGoTo/:id" element={<TargetPage />} />
</Routes>

目标页面通过useParams获取ID并重新请求：

import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';

const TargetPage = () => {
  const { id } = useParams();
  const [data, setData] = useState(null);
  
  useEffect(() => {
    const fetchData = async () => {
      const res = await fetch(`你的API地址/${id}`);
      const data = await res.json();
      setData(data);
    };
    if (id) fetchData();
  }, [id]);
  
  return <div>{data?.name}</div>;
};

内容的提问来源于stack exchange，提问作者Filotimo