升级React Router至7.3.0后TypeScript组件useNavigate报错求助

将React Router从6.29.0版本升级到7.3.0后，触发如下错误：

Error: useNavigate() may be used only in the context of a component.

该错误仅在JavaScript组件调用TypeScript组件时出现。降级回6.29.0版本，或把调用useNavigate的子组件改为JavaScript组件，问题都能解决，但修改组件类型会引发其他问题。

简化代码示例 #

Routes 组件（JSX） #

const Routes = () => {
  return (
    <BrowserRouter>
      <TestComponent />
    </BrowserRouter>
  )
}

TestComponent 组件（TSX） #

const TestComponent: FunctionComponent<void> = () => {
  const navigate = useNavigate()
  return <></>
}

export default TestComponent

完整项目代码 #

index.jsx #

import React from 'react'

import { createRoot } from 'react-dom/client'

import App from './components/App'

const grootDiv = document.createElement('div')
grootDiv.id = 'groot'
document.body.appendChild(grootDiv)
const root = createRoot(grootDiv)

// eslint-disable-next-line react/no-deprecated
root.render(<App />)

App.jsx #

import React from 'react'

import Routes from './Navigation/Routes'

const App = () => {
  return <Routes />
}

App.displayName = 'App'

export default App

Routes.jsx #

import * as React from 'react'

import { BrowserRouter, Route, Routes as ReactRoutes } from 'react-router-dom'

import TestComponent from './TestComponent'

const Test = () => {
  return <div>Test</div>
}
const Routes = () => {
  return (
    <BrowserRouter>
      <TestComponent />
      <ReactRoutes>
        <Route element={<Test />} path="/" />
      </ReactRoutes>
    </BrowserRouter>
  )
}

export default Routes

TestComponent.tsx（重命名为.jsx可正常运行） #

import * as React from 'react'

import { useNavigate } from 'react-router-dom'

const TestComponent = () => {
  const navigate = useNavigate()
  return <></>
}

export default TestComponent

package.json #

{
  "name": "react-dom-example",
  "description": "react-dom-example",
  "files": [
    "dist/*"
  ],
  "scripts": {
    "dev": "NODE_OPTIONS=\"--max-old-space-size=4096\" webpack-dev-server --open --config webpack.local.js"
  },
  "engines": {
    "npm": ">=8",
    "node": ">=20.0"
  },
  "dependencies": {
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^7.3.0",
    "typescript": "^5.8.2",
    "util": "^0.12.5"
  },
  "devDependencies": {
    "@babel/preset-env": "*",
    "@babel/preset-react": "*",
    "@types/node": "^22.10.2",
    "@types/react": "^18.3.11",
    "@types/react-big-calendar": "^1.16.0",
    "@types/react-dom": "^18.3.5",
    "@types/react-router-dom": "^5.3.3",
    "babel-loader": "*",
    "css-loader": "*",
    "html-webpack-plugin": "*",
    "mini-css-extract-plugin": "*",
    "prettier": "*",
    "ts-loader": "*",
    "ts-node": "*",
    "url-loader": "*",
    "webpack": "*",
    "webpack-cli": "*",
    "webpack-dev-server": "*",
    "webpack-merge": "*"
  }
}

tsconfig.json #

{
  "compilerOptions": {
    "outDir": "dist",
    "sourceMap": true,
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true,
    "allowJs": true,
    "moduleResolution": "node",
    "module": "commonJS",
    "lib": ["es6", "dom"],
    "target": "ES6",
    "jsx": "react",
    "typeRoots": ["node_modules/@types", "node_modules/@testing-library"]
  },
  "exclude": [
    "node_modules",
    "dist",
    "playwright" // playwright compiles under it's own rules.  No need to include it here.
  ]
}

当前使用环境：TypeScript 5.8.2、Webpack 5.98.0，希望通过调整TypeScript配置解决该问题。

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