S
SolidJS•5mo ago
sponge

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
Brendonovich
Brendonovich•5mo ago
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
sponge
sponge•5mo ago
ah ok, so in that case, useNavigate can go inside App?
Brendonovich
Brendonovich•5mo ago
yep
sponge
sponge•5mo ago
ah that did it, saw that in the docs but didn't realize how it applied to me. thank you!
Want results from more Discord servers?
Add your server
More Posts
Response.clone: Body has already been consumed. Seroval/trpc conflict?There was some discussion about this recently, but was there a way to fix this currently in user codSolidStart for PWA with CSR? And Guide of available templates.I want to build a PWA with **CSR**. So, I've installed Solid Start, and used the "basic" template. Import React component with Module FederationI have a simple use case which belies the greater effort: importing a counter with a starting value How can I make auth0 with solidjsI found <https://github.com/rturnq/solid-auth0>, but It doesn't have docs or examplesCached resource runs into an error when using an actionI'm running into this error which I've isolated to a component that uses this cached function ``` coCan on__ handler be async?Seems that having async handlers works fine, ```jsx const button = <button onClick={doSomethingAsyCan't route with Solid Router in subfolder of multi-page Vite appi have a folder structure where my solid app exists inside of `/prefabs` with children like `/prefacreateResource does not trigger suspense when its first-argument signal changesI have a modal component, with its open state managed by a signal. I want to fetch the data that showindow.location.search not empty after changing routeI need your help because I'm stuck and not sure how to proceed. I have a Solid.js app with the folloUndici fetch failed while building solid-start project on prod server@Halcyon while building solid-start project with `solid-start build` inside docker build with `nod