遵循教程后，react-router-dom 调用的 Hook 无效

Posted 2023-02-19

【中文标题】遵循教程后，react-router-dom 调用的 Hook 无效

【英文标题】：Invalid Hook for react-router-dom call after following tutorial

【发布时间】：2022-01-22 10:11:55

【问题描述】：

我最近在https://youtu.be/Law7wfdg_ls 观看了教程，并创建了一个完全模仿它的网络应用程序。我试图使用 BrowserRouter 通过链接导航到新页面。在他的作品中，我的作品给了我“无效的钩子呼叫”，任何人都可以帮助我理解为什么会这样吗？我附上了我的 App.js 的图片，我在其中调用了错误消息的钩子和图片。

This is my code in App.js. The only difference from the tutorial are my page names and the use of 'Routes' rather than switch as routes replaced switch, and 'element' instead of component

This is the error message I am getting

【参考方案1】：

你链接的教程是2019年的，肯定不是使用当前版本的react-router-dom！

当前版本是 v6.x，有很多重大变化。

为了专门解决您询问的问题，其中一项更改是对 Route 组件的更改。他们不再使用component, render, or childrenfunctions to render routed components, but instead use the singularelementprop that takes a JSX literal, or rather, aReactElement`，值。

<Routes>
  <Route path="/" element=<Home /> />
  <Route path="profile" element=<Profile /> />
  <Route path="/private" element=<Private /> />
  <Route path="/public" element=<Public /> />
</Routes>

我建议关注 Upgrading from v5 以了解 v4/5 语法的其余更改，您将在许多较旧的 RRD 演示和教程中看到。