React useNavigate生产环境报错，本地Vite运行正常（pnpm monorepo）

问题描述 #

基于pnpm monorepo搭建的项目，顶层通过BrowserRouter全局包裹所有组件。其中Calculatorinator组件内调用const navigate = useNavigate();，本地使用Vite启动完全正常，但部署到Vercel、Netlify等生产环境时，useNavigate会抛出错误，日志仅显示"Error"（尝试打印错误对象的name和message属性，无额外信息）。已通过代码检查和Chrome React DevTools确认，Calculatorinator组件确实处于Router的上下文范围内。

简化项目结构 #

main.tsx #

root.render(
    <StrictMode>
        <Router>
            <RootProvider>
                <App/>
            </RootProvider>
        </Router>
    </StrictMode>
);

App.tsx #

<div className="App">
  <Routes>
    <Route
          path="calculatorinator"
          element={
            <div className="calculatorinatorContainer">
              <Calculatorinator/>
            </div>
          }
    />
  </Routes>
</div>

Calculatorinator.tsx #

const Calculatorinator = (props: CalculatorinatorProps) => {
  const navigate = useNavigate();

  // 组件其他逻辑
};

已尝试的排查/解决方法 #

• 尝试在Calculatorinator组件的入口文件中额外添加Router包裹（未解决问题）
• 按照Stack Overflow建议，在main.tsx中用StrictMode包裹Router（无效）
• 项目已配置_redirects文件，内容为/* /index.html 200，解决了路由刷新问题，但未修复useNavigate报错

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