使用 RouterProvider 会导致错误消息：警告：无效的挂钩调用，未捕获的类型错误：无法读取 null 的属性（读取“useState”）

Question

我正在密切关注在线教程，但由于以下错误而陷入了早期阶段：

    react-router-dom.js?v=b0141f25:137 Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
    See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

react-router-dom.js?v=b0141f25:1067 Uncaught TypeError: Cannot read properties of null (reading 'useState')
    at Object.useState3 (react-router-dom.js?v=b0141f25:1067:29)
    at RouterProvider (react-router-dom.js?v=b0141f25:28078:38)
    at renderWithHooks (react-dom_client.js?v=b0141f25:11568:26)
    at mountIndeterminateComponent (react-dom_client.js?v=b0141f25:14946:21)
    at beginWork (react-dom_client.js?v=b0141f25:15934:22)
    at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=b0141f25:3674:22)
    at Object.invokeGuardedCallbackDev (react-dom_client.js?v=b0141f25:3699:24)
    at invokeGuardedCallback (react-dom_client.js?v=b0141f25:3733:39)
    at beginWork$1 (react-dom_client.js?v=b0141f25:19793:15)
    at performUnitOfWork (react-dom_client.js?v=b0141f25:19226:20)

由这段代码（App.jsx 文件）产生：

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import { BrowserRouter, RouterProvider } from 'react-router-dom'
import router from './router.jsx'
import App from './App.jsx'


ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

根据教程，在 Laravel 项目中创建了一个 React 文件夹，生成了 2 个 package.json - 这是一个好的行业标准吗？我已确保 React 和 React 路由器位于正确的 package.json 中，而不是 Laravel 中。该人使用的react-router-dom也是更新的 - 基于他的github代码.

如何解决这个问题？

Answer 1

可以提供一下你的代码github地址吗？