React Router v6中不使用<Outlet />向类组件子组件传参方法

方案1：高阶组件(HOC)封装useOutletContext #

通过高阶组件把useOutletContext获取的参数注入类组件的props中，让类组件能直接通过props拿到传参。

示例代码：

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

const withOutletContext = (WrappedComponent) => {
  return (props) => {
    const outletContext = useOutletContext();
    return <WrappedComponent {...props} {...outletContext} />;
  };
};

// 目标类组件
class MyClassComponent extends React.Component {
  render() {
    const { someData } = this.props;
    return <div>{someData}</div>;
  }
}

// 用HOC包裹后导出
export default withOutletContext(MyClassComponent);

父路由组件通过Outlet传参：

import { Outlet } from 'react-router-dom';
import { useSelector } from 'react-redux';

function ParentRoute() {
  const someData = useSelector(state => state.some.data);
  return <Outlet context={{ someData }} />;
}

方案2：自定义Context + 类组件contextType #

如果之前用Context API失败，可能是用法有误。可以自定义Context，在父路由组件中提供值，类组件通过static contextType绑定后直接获取。

示例代码：

// 自定义Context文件
import React from 'react';
export const MyCustomContext = React.createContext();

// 父路由组件
import { Outlet } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { MyCustomContext } from './MyCustomContext';

function ParentRoute() {
  const someData = useSelector(state => state.some.data);
  return (
    <MyCustomContext.Provider value={{ someData }}>
      <Outlet />
    </MyCustomContext.Provider>
  );
}

// 类组件使用
import { MyCustomContext } from './MyCustomContext';

class MyClassComponent extends React.Component {
  static contextType = MyCustomContext;
  render() {
    const { someData } = this.context;
    return <div>{someData}</div>;
  }
}

如果需要传递多组参数，可以在Provider中传入多个值，或者拆分多个独立Context。

方案3：直接用Redux的connect映射状态 #

既然项目基于Redux，完全可以沿用mapStateToProps直接在类组件中获取状态，不需要依赖Outlet传参逻辑：

import { connect } from 'react-redux';

class MyClassComponent extends React.Component {
  render() {
    const { someData } = this.props;
    return <div>{someData}</div>;
  }
}

const mapStateToProps = (state) => {
  return {
    someData: state.some.data
  };
};

export default connect(mapStateToProps)(MyClassComponent);

这种方式最贴合你原本的代码逻辑，直接从Redux仓库取数，无需额外处理路由传参。

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