unable to define navigate = useNavigate()-CodePudding

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?

CodePudding user response：

You can't put your statements which define variables in the middle of a JSX expression.

Define your variables first. Then do your JSX.

const navigate = useNavigate();

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

CodePudding user response：

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>
  );
}