小编And*_*rst的帖子

我正在尝试使用a react-router，在使用该库后开始出现一些问题，我已经尝试编写不同的代码，我在互联网上找到了现成的代码，但仍然出现问题（甚至重置Windows）。这段代码取自官方的react-router文档，按照所写的进行了所有操作（https://reactrouter.com/docs/en/v6/getting-started/installation），这是错误：

警告：无效的挂钩调用。钩子只能在函数组件的主体内部调用。>出现这种情况可能是由于以下原因之一：

1. 您的 React 和渲染器版本可能不匹配（例如 React DOM）
2. 你可能违反了 Hooks 规则
3. 您可能在同一个应用程序中拥有多个 React 副本，请参阅https://reactjs.org/link/invalid-hook-call了解有关如何调试和解决此问题的提示。printWarning@react.development.js:207

未捕获的类型错误：无法读取 null 的属性（读取“useRef”）

在 useRef (react.development.js:1628:1)

在 BrowserRouter (index.tsx:151:1)

在 renderWithHooks (react-dom.development.js:16175:1)

在 mountInminatedComponent (react-dom.development.js:20913:1)

在开始工作（react-dom.development.js：22416：1）

在 HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)

在 Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)

在 invokeGuardedCallback (react-dom.development.js:4274:1)

在 beginWork$1 (react-dom.development.js:27405:1)

在 PerformUnitOfWork (react-dom.development.js:26513:1)

组件中出现上述错误：

在 BrowserRouter (http://localhost:3001/static/js/bundle.js:45400:5)

考虑向树添加错误边界以自​​定义错误处理行为。访问https://reactjs.org/link/error-boundaries了解有关错误边界的更多信息。logCapturedError @react-dom.development.js:18572

4 个错误invalid hooks、 3 个错误 和Uncaught TypeError: Cannot read properties of null (reading 'useRef')出现The above error occurred …

我有主要的 App.js 组件，我在其中制作了类似数据库的东西。我希望授权用户的对象位于 App.js 中，我创建了一个 useState 来存储该用户。

import React, {useState} from 'react';

import './App.css';
import AuthPage from './components/AuthPage/AuthPage';

function App() {
  const [activeUser, setActiveUser] = useState();  
  const [users, setUsers] = useState(
    [
      {
        name: 'Andrey',
        email: 'qwerty@mail.ru',
        password: 'qwerty'
      },
      {
        name: 'Roma',
        email: 'ramenCisco@mail.ru',
        password: '123'
      },
      {
        name: 'Ilya',
        email: 'ilyazxc@mail.ru',
        password: 'zxc'
      }
    ]

  )

  return (
    <>
      <AuthPage users = {users} setActiveUser = {setActiveUser}/>
    </>
  );
}

export default App;

为了将用户放在那里，我需要他首先登录，为此我有 AuthPage.js 组件，Login.js 位于其中，反过来，我将通过该组件传递具有授权的对象用户直接访问状态应用程序。为此，我使用 props 将 …