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