React Router v6嵌套路由Outlet传值触发class组件componentDidUpdate咨询

可行解决思路 #

方案1：用函数组件包裹Class组件，把Outlet context转为Props传递 #

这是改造成本最低的方案，利用useOutletContext Hook取出路由上下文，作为Props传入Dashboard组件，即可直接在componentDidUpdate中监听Props变化触发请求。

1. 定义包裹组件

import { useOutletContext } from 'react-router-dom';
import Dashboard from './Dashboard';

const DashboardWrapper = () => {
  // 取出AppLayout通过Outlet传递的所有上下文数据
  const outletContext = useOutletContext();
  // 所有上下文数据转为Props传递给Class组件
  return <Dashboard {...outletContext} />
}

2. 修改路由配置，把原来Dashboard的位置替换为包裹组件

<Route path='dashboard' element={<DashboardWrapper />} />

3. 在Dashboard的componentDidUpdate中监听Props变化

class Dashboard extends React.Component {
  componentDidUpdate(prevProps) {
    // 以你传递的上下文参数为userId举例，对比前后值变化
    if (prevProps.userId !== this.props.userId) {
      // 执行你的REST请求逻辑
      this.fetchDashboardData(this.props.userId);
    }
  }
}

方案2：使用自定义Context实现消费 #

如果不想修改路由配置，可以不用Outlet的上下文，单独创建自定义Context来传递数据，Class组件原生支持监听自定义Context的变化。

1. 新建单独文件定义Context

// src/contexts/AppLayoutContext.js
import { createContext } from 'react';
export default createContext(null);

2. 在AppLayout中提供Context

import AppLayoutContext from './contexts/AppLayoutContext';

class AppLayout extends React.Component {
  // 原有状态、数据拉取逻辑不变
  render() {
    return (
      <AppLayoutContext.Provider value={/* 你要传递的所有数据 */}>
        {/* 原有布局结构不变 */}
        <Outlet /> {/* 这里不需要再传context属性 */}
      </AppLayoutContext.Provider>
    )
  }
}

3. 在Dashboard组件中消费Context，监听变化

import AppLayoutContext from './contexts/AppLayoutContext';

class Dashboard extends React.Component {
  // 绑定Context
  static contextType = AppLayoutContext;

  // 捕获更新前的context值
  getSnapshotBeforeUpdate() {
    return this.context;
  }

  componentDidUpdate(prevProps, prevState, prevContext) {
    // 对比前后context值变化
    if (prevContext !== this.context) {
      // 执行你的REST请求逻辑
      this.fetchDashboardData(this.context);
    }
  }
}

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