unable to define navigate = useNavigate()

I’m trying to run this code:

  const navigate = useNavigate()
  <div>
    <button onClick={() => navigate("/")}>CLICK</button>
    <h1>HATS PAGE</h1>
  </div>
);

but somehow const navigate = useNavigate() gives me Parsing error: Unexpected token

Could anyone please help me with this problem?

Answer

Hooks need to be called at the top level of your React functional component.

function ComponentName() {
  const navigate = useNavigate();

  return (
    <div>
    <button onClick={() => navigate("/")}>CLICK</button>
      <h1>HATS PAGE</h1>
    </div>
  );
}