React多路由场景下API数据单次加载复用的最优实现方案咨询

看起来你遇到的是典型的跨路由共享静态数据的问题——同一个项目/活动的多个子路由重复请求相同的API，造成不必要的资源浪费。下面给你几个实用的解决方案，都能实现“一次加载、多路由复用”的效果，而且支持直接通过书签访问的场景：

方案一：React Context + 父路由包裹（最推荐） #

这个方案的核心是把数据加载逻辑提到匹配所有同项目子路由的父组件中，然后通过Context把数据共享给所有子路由组件。这样不管用户切换到该项目下的哪个路由，数据都只在父组件加载一次。

步骤1：创建项目数据Context #

// src/contexts/ProjectContext.js
import { createContext, useContext, useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

const ProjectContext = createContext();

export function ProjectProvider({ children }) {
  const { projectId } = useParams();
  const [projectData, setProjectData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 重置状态，避免不同projectId的数据混淆
    setIsLoading(true);
    setError(null);
    
    // 封装API请求逻辑
    const fetchProjectData = async () => {
      try {
        const response = await fetch(`/api/projects/${projectId}`);
        const data = await response.json();
        setProjectData(data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchProjectData();
  }, [projectId]); // 只有projectId变化时才重新请求

  return (
    <ProjectContext.Provider value={{ projectData, isLoading, error }}>
      {children}
    </ProjectContext.Provider>
  );
}

// 自定义Hook，方便子组件获取Context
export function useProject() {
  return useContext(ProjectContext);
}

步骤2：修改路由配置，用父组件包裹所有项目子路由 #

原来的路由配置里，把项目相关的路由都放在一个匹配/projects/:projectId/*的父路由里，由父路由提供Context：

<Switch>
  {/* Dashboard */}
  <Route exact path="/projects" component={ProjectFind}/>
  <Route exact path="/campaigns" component={CampaignFind}/>
  
  {/* Projects 父路由包裹 */}
  <Route path="/projects/:projectId">
    <ProjectProvider>
      <Switch>
        <Redirect exact from='/projects/:projectId' to='/projects/:projectId/details'/>
        <Route exact path="/projects/:projectId/details" component={ProjectDetails}/>
        <Route exact path="/projects/:projectId/details/config" component={ProjectConfig}/>
        {/* ... 其他项目子路由 ... */}
      </Switch>
    </ProjectProvider>
  </Route>
  
  {/* Campaigns 同理，创建CampaignContext和CampaignProvider */}
  <Route path="/campaigns/:campaignId">
    <CampaignProvider>
      <Switch>
        <Redirect exact from='/campaigns/:campaignId' to='/campaigns/:campaignId/details'/>
        <Route exact path="/campaigns/:campaignId/details" component={CampaignDetails}/>
        <Route exact path="/campaigns/:campaignId/details/config" component={CampaignConfig}/>
        {/* ... 其他活动子路由 ... */}
      </Switch>
    </CampaignProvider>
  </Route>
</Switch>

步骤3：子组件中使用Context数据 #

在ProjectDetails、ProjectConfig等组件里，直接用自定义Hook获取数据，不用再自己请求：

// src/components/ProjectDetails.js
import { useProject } from '../contexts/ProjectContext';

export default function ProjectDetails() {
  const { projectData, isLoading, error } = useProject();

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>加载失败：{error}</div>;

  return (
    <div>
      <h1>{projectData.name}</h1>
      {/* 渲染项目详情 */}
    </div>
  );
}

这个方案的优势：

• 天然支持直接访问书签（比如用户直接打开/projects/123/config，父路由会先加载数据，再渲染子组件）
• 数据逻辑集中管理，子组件无需关心加载过程
• 不同项目的Context相互隔离，不会出现数据混淆

方案二：自定义Hook + 本地缓存 #

如果不想用Context，也可以写一个带缓存的自定义Hook，用useRef存储已加载的数据，避免重复请求：

// src/hooks/useProjectData.js
import { useState, useEffect, useRef } from 'react';
import { useParams } from 'react-router-dom';

// 用useRef存全局缓存，组件卸载后不会清除（如果需要清除可以加逻辑）
const projectCache = useRef({});

export function useProjectData() {
  const { projectId } = useParams();
  const [data, setData] = useState(projectCache.current[projectId] || null);
  const [isLoading, setIsLoading] = useState(!projectCache.current[projectId]);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 如果缓存里有数据，直接返回
    if (projectCache.current[projectId]) {
      setData(projectCache.current[projectId]);
      setIsLoading(false);
      return;
    }

    const fetchData = async () => {
      setIsLoading(true);
      try {
        const res = await fetch(`/api/projects/${projectId}`);
        const projectData = await res.json();
        projectCache.current[projectId] = projectData; // 存入缓存
        setData(projectData);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [projectId]);

  return { data, isLoading, error };
}

然后在子组件里直接用这个Hook：

import { useProjectData } from '../hooks/useProjectData';

export default function ProjectConfig() {
  const { data, isLoading, error } = useProjectData();
  
  // 渲染逻辑...
}

这个方案的优势是更轻量化，不需要修改路由结构；但要注意缓存的清理（比如用户长时间停留在页面，数据可能过期，需要加缓存失效逻辑）。

方案三：嵌套路由 + 状态提升（适合简单场景） #

如果你的项目路由层级不深，也可以把数据加载逻辑放在父路由组件里，通过props把数据传递给子组件：

// src/components/ProjectWrapper.js
import { useState, useEffect } from 'react';
import { useParams, Switch, Route, Redirect } from 'react-router-dom';
import ProjectDetails from './ProjectDetails';
import ProjectConfig from './ProjectConfig';

export default function ProjectWrapper() {
  const { projectId } = useParams();
  const [projectData, setProjectData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    // 加载数据逻辑...
  }, [projectId]);

  if (isLoading) return <div>加载中...</div>;

  return (
    <Switch>
      <Redirect exact from='/projects/:projectId' to='/projects/:projectId/details'/>
      <Route 
        exact path="/projects/:projectId/details" 
        render={(props) => <ProjectDetails {...props} projectData={projectData} />} 
      />
      <Route 
        exact path="/projects/:projectId/details/config" 
        render={(props) => <ProjectConfig {...props} projectData={projectData} />} 
      />
    </Switch>
  );
}

然后路由配置里直接用这个Wrapper：

<Route path="/projects/:projectId" component={ProjectWrapper}/>

这个方案简单直接，但如果子路由很多，传递props会比较繁琐，不如Context灵活。

不管选哪个方案，核心思路都是把数据加载逻辑提升到共享的父级上下文/组件中，让同项目的所有子路由复用一份数据，避免重复API调用。

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