使用Expo Router向类定义React组件页面传参后如何获取参数？

Expo Router 的路由参数无法直接通过类组件的默认 props 获取，因为类组件不能使用 useLocalSearchParams 这类函数组件专属的 Hook，默认打印的 props 只会包含 segment 字段。以下是两种可行的解决方法：

方法一：函数组件做包裹层（推荐） #

写一个简单的函数组件作为中间层，通过 Hook 拿到路由参数后，传递给你的类组件：

import React from 'react';
import { useLocalSearchParams } from 'expo-router';

// 你的原有类组件保持不变
class HomePage extends React.Component {
  constructor(props) {
    super(props);
    // 现在可以拿到传入的 id 参数了
    console.log('路由参数：', this.props.params); 
  }

  render() {
    return <div>当前ID：{this.props.params.id}</div>;
  }
}

// 新增的包裹层函数组件
export default function WrapperHomePage() {
  const params = useLocalSearchParams(); // 获取路由参数
  return <HomePage params={params} />;
}

方法二：高阶组件（HOC）封装 #

如果需要在多个类组件中复用参数获取逻辑，可以封装一个高阶组件：

import React from 'react';
import { useLocalSearchParams } from 'expo-router';

// 定义高阶组件，用于注入路由参数
function withParams(Component) {
  return function WrappedComponent(props) {
    const params = useLocalSearchParams();
    return <Component {...props} params={params} />;
  };
}

// 你的类组件
class HomePage extends React.Component {
  constructor(props) {
    super(props);
    console.log('路由参数：', this.props.params);
  }

  render() {
    return <div>当前ID：{this.props.params.id}</div>;
  }
}

// 用高阶组件包裹后导出
export default withParams(HomePage);

原理说明 #

Expo Router 的路由参数（比如你传递的 id）存储在 URL 查询参数中，必须通过 useLocalSearchParams 这类 Hook 才能读取。由于类组件无法直接调用 Hooks，所以需要通过函数组件作为桥梁，把参数传递给类组件使用。

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