在使用useContext()时，始终会遇到标准的React钩子错误。使用这个钩子的好模式是什么？

Question

我正在尝试使用useContext()钩子，但总是遇到标准的React钩子错误(例如，钩子只能在函数内调用，可能存在重复的React版本等)。考虑到这是我本地计算机上的一个配置问题，我尝试并成功地在这个沙箱中复制了这个问题：https://codesandbox.io/s/contextapi-hooks-wjvuk?file=/src/components/pages/Home.js

我已经阅读了一大堆教程，并在这里阅读了一些帖子，但没有一个成功的解决方案为我指明了解决问题的方向。

我相信我在我的实现中遗漏了一个小细节，所以任何帮助/建议，无论是实用的还是理论上的，来巩固我对React和Context-API的理解都会非常感谢。

干杯！

Answer 1

只允许在组件内部使用挂钩。目前，您的Home函数在任何地方都不能用作组件，因此您不能在其中使用useContext。尝试替换此行：

<Route exact path="/" render={Home} />

使用：

<Route exact path="/"><Home /></Route>