Using `useNavigate()` threw an error about solid-router HOT 4 CLOSED

Context only works under component render/primitive(hook) execution. If you call use from like an event handler context it won't be there. I suspect that is what is happening here.

from solid-router.

@ryansolid Thank you so much. It works well after taking the function out of the event handler scope.

from solid-router.

I am having this problem and don't understand the solution. In my component there is a button, and when you click on it, I need to navigate to a specific page after taking various actions. Those actions happen inside the click handler callback of the button. How can I move the navigate call outside of the click handler?

from solid-router.

Try grabbing a reference to navigate at the top of your function, then use it in the event handler...

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

  return (
    <button 
      onClick={() => {
        // do other stuff
        navigate("somewhere");
      }}
    >
      Click Me
    </button>
  );
}

from solid-router.