React 如何在独立工具函数中实现页面跳转？解决props未定义报错

你遇到的'props' is not defined报错核心原因是：

• createCheckoutSession是独立导出的普通JavaScript函数，运行在模块严格模式下时函数内部的this指向为undefined，不存在绑定React组件实例的上下文，自然无法直接通过this.props获取路由属性，因此触发未定义变量的报错。

方案1：将路由对象作为参数传入独立函数（最简单，适合新手） #

因为你本身就是在React组件内部调用这个函数，组件可以直接从props拿到路由提供的history对象，直接作为参数传递给独立函数即可：

1. 修改createCheckoutSession的函数定义，新增history入参，同时用户为空跳转后必须加return终止后续逻辑（否则后续代码访问user.uid会触发空引用报错）：

// 修改后的函数定义
import routes from 你的路由配置路径;

export async function createCheckoutSession(activtyStatus, history) {
  let user = firebase.auth().currentUser;

  if (user == null) {
    // 用传入的history完成跳转
    history.push(routes.CLIENTS)
    // 必须return，阻止后续依赖user的逻辑继续执行
    return;
  }

  // 以下为你原有的业务逻辑
  console.log(user)
  var price = 'price_1IGW85KDPaWWeL1yjWsi9oRa'
  // ... 其余原有代码保持不变
}

2. 修改组件内的调用逻辑，把组件拿到的history对象传进去：

// 组件内部的原有调用代码
if (regData == "yes") {
  console.log("INSIDE broom spinner" + regData)
  // 类组件直接从props取history传入
  createCheckoutSession(user.uid, this.props.history)
  // 函数组件则传入通过useHistory() Hook拿到的history实例即可
}

方案2：使用React Router的独立单例history（适合不想重复传参的场景） #

如果不想每次调用都传递history参数，可以借助history库创建全局可访问的路由实例，在独立工具函数中直接引用：

1. 新建全局history实例文件，比如src/history.js：

import { createBrowserHistory } from 'history';
// 创建单例历史对象导出
export default createBrowserHistory();

2. 替换根组件的Router配置，让路由识别这个自定义的history实例：

// 比如入口文件src/index.js中的修改
import { Router } from 'react-router-dom';
import history from './history';

// 替换原来的BrowserRouter为传入自定义history的Router
ReactDOM.createRoot(document.getElementById('root')).render(
  <Router history={history}>
    <App />
  </Router>
)

3. 在createCheckoutSession中直接引入这个全局history完成跳转：

import history from './history';
import routes from 你的路由配置路径;

export async function createCheckoutSession(activtyStatus) {
  let user = firebase.auth().currentUser;

  if (user == null) {
    history.push(routes.CLIENTS)
    return;
  }
  // 后续原有业务逻辑保持不变
}

• 原有代码中firestore.collection('customers').doc(user.uid).collection('subscriptions').get().这行末尾没有补全异步回调逻辑，会触发语法报错
• 检测到user == null时，跳转逻辑执行后必须立即终止函数运行，否则后续所有依赖user.uid的数据库操作都会触发空值引用错误

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