React项目中react-to-print与Navigate触发useRef报错问题求助

出现Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useRef) is not a function错误，核心原因基本集中在React导入异常、依赖版本不兼容、组件卸载时的资源残留这几个方向，结合你的场景，可按以下步骤排查解决：

1. 检查useRef的导入正确性 #

首先确认useRef是从react核心库正确导入的，避免拼写错误或导入路径错误：

// 正确写法
import { useRef } from 'react';

// 错误示例（会导致hooks引用失效）
import useRef from 'react';
import { useRef } from 'react-dom';

2. 升级react-to-print至兼容版本 #

react-to-print的旧版本可能与React 18的hooks机制存在兼容性问题，导致组件跳转卸载时，残留的打印逻辑错误调用hooks。执行以下命令升级到最新版：

npm install react-to-print@latest
# 或用yarn
yarn add react-to-print@latest

3. 组件卸载时清理打印任务 #

react-to-print的打印实例在组件跳转后可能未被正确销毁，导致后续尝试访问已卸载组件的ref。可以通过useEffect的清理函数手动终止打印任务：

import React, { useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useReactToPrint } from 'react-to-print';

const PrintPreview = () => {
  const componentRef = useRef();
  const navigate = useNavigate();
  // 用ref保存打印实例
  const printInstance = useRef();

  printInstance.current = useReactToPrint({
    content: () => componentRef.current,
  });

  // 组件卸载时清理打印任务
  useEffect(() => {
    return () => {
      printInstance.current?.cancel?.();
    };
  }, []);

  return (
    <div>
      <button onClick={printInstance.current}>打印</button>
      <button onClick={() => navigate(-1)}>返回</button>
      <div ref={componentRef}>
        {/* 你的打印内容 */}
      </div>
    </div>
  );
};

export default PrintPreview;

4. 排查重复React实例问题 #

如果项目中存在多个React实例（比如依赖树中嵌套安装了多个react包），会导致hooks引用的上下文失效。执行以下命令检查：

npm list react

如果输出显示多个版本的react，删除node_modules和package-lock.json，重新执行npm install来统一依赖版本。

内容的提问来源于stack exchange，提问作者Aliénor