Question

我该如何修复与 react-router 相关的 react 错误

2021-11-29

462

reactjs router

请告诉我，我花了 4 天时间都没搞明白，无论我怎么努力，都会弹出同样的错误，无论我向应用程序添加什么库，它们都理解 react-router，并且每次编译都以错误结束：无效的钩子调用。钩子只能在函数组件的主体内调用。这可能是由于以下原因之一而发生的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
您可能违反了钩子的规则
您可能在同一个应用程序中拥有多个 React 副本有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call 。对于这个错误，您能告诉我如何正确修复它吗？可能与库的安装有某种联系，或者我家里的 react-router 根本不支持，我将不胜感激您的帮助！

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <div>
      <header>
        <Router>
          <Routes>
            <Route exact path="/" component={<Main />} />
            <Route exact path="/" component={<Users />} />
            <Route exact path="/" component={<Contacts />} />
          </Routes>
        </Router>
      </header>
    </div>
  );
}

const Main = () => {
  <div>
    <h1>I am Main page! Hello user!</h1>
  </div>
}
const Users = () => {
  <div>
    <h1>I am Users page! Hello user!</h1>
  </div>
}
const Contacts = () => {
  <div>
    <h1>I am Contacts page! Hello user!</h1>
  </div>
}

Answer 1

我不确定这是否是你的问题，因为看起来你没有在任何地方使用钩子，但你的组件需要有一个 return 语句或用括号括起来

const Main = () => (
  <div>
    <h1>I am Main page! Hello user!</h1>
  </div>
);

或

 const Main = () => {
      return (
        <div>
          <h1>I am Main page! Hello user!</h1>
        </div>
      )
    }

Answer 2

如果没有代码示例，就不可能准确地知道你做错了什么。

因此，在编辑你的帖子之前，有些东西值得检查...

Archives 扩展需要以 .jsx 或 typescript .tsx 结尾

这可能不是你的情况，但值得了解。某些钩子在另一个函数中使用它时会引发错误例如：

function App() {

//right
const history = useHistory();


function myFunction(){
// wrong
const history = useHistory();

 history.push('/');
}


return (
...jsx
)
}

export default App;

Answer 3

一个不相关的提示 - 像 ESLint 这样的好 linter 将帮助您编写出好的、无错误的代码。起初，它会抱怨很多，但那是因为你的代码在质量方面需要很多改进。

如果你使用了 Create React App，它应该已经安装好了，只需在你的编辑器中打开它即可。