useNavigate wrapped in <Router>
Hello! I'm trying to use useNavigate inside a top-level element so I can setup some event listeners that will trigger navigations app-wide:
https://playground.solidjs.com/anonymous/2ea655b2-d438-4ead-ac5d-a6f134d79e26
gives me
Uncaught Error: Make sure your app is wrapped in a <Router />
Several Stack Overflow answers said that you can't use useNavigate inside an event listener, which is what I was originally doing, so I tried to move it into a new component that is nested underneath <Router> but it seems like useNavigate only works on a component inside <Route>.
Is this intentional behavior, despite the error message looking for <Router>? Is there any other way to instantiate useNavigate at a high enough level that it will always trigger regardless of the current route?
Thank you!Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
4 Replies
top-level stuff should be in a root layout: https://github.com/solidjs/solid-router?tab=readme-ov-file#configure-your-routes
GitHub
GitHub - solidjs/solid-router: A universal router for Solid inspire...
A universal router for Solid inspired by Ember and React Router - GitHub - solidjs/solid-router: A universal router for Solid inspired by Ember and React Router
ah ok, so in that case, useNavigate can go inside
App?yep
ah that did it, saw that in the docs but didn't realize how it applied to me. thank you!