Keep running into standard React hook errors when using useContext(). What is a good pattern in using this hook?

I’m trying to use the useContext() hook but keep running into the standard React hook errors (e.g. Hooks can only be called within function, possible duplicate React versions etc..). Thinking this to be a configuration issue on my local computer I attempted, and succeeeded, in duplicating the issue in this sandbox: https://codesandbox.io/s/contextapi-hooks-wjvuk?file=/src/components/pages/Home.js

I’ve been through a bunch of tutorials and read some posts here but none of the successful solutions point me in the direction of solving my issue.

I believe I’m missing a small detail in my implementation so any help/advice, whether practical or theoretical, to consolidate my understanding of React and Context-API would be much appreciated.

Cheers!

Answer

You are allowed to use hooks only inside a component. Currently, your Home function isn’t used as a component anywhere, so you can’t use useContext inside it.
Try to replace this line:

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

with:

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