SolidJSS
SolidJS•2y ago•
58 replies
Eatham

How to call `useNavigate` outside of router

I am trying to create my own "page viewer" where I will be able to navigate between pages within the site;

Currently I am using the Solid Router. But I want to be able to call the "window" to navigate from outside of the router. But I can't do that.

I get the following error when trying to call useNavigate
Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.


I want to be able to do the following outside of the router:
1. Go back
2. Go forwards
3. Reload
4. Navigate
5. Clear navigation history

So far I know for going forwards and backwards I can use history.back. But I cant refresh using location.reload because the window is a dialog so reloading is going to close the dialog. And the other options I don't really know what I can do.

I tried to get the Navigate function by using the Navigate component and then taking the function from the parameter passed in the href

e.g.
let navigate : Navigate | undefined;

const doStuff = ({n: Navigate}) => {
  navigate = n;
  return "/404"
}

return (
  <Router>
    <Route path={"/"} component={() => <Navigate href={doStuff}></Navigate>}></Route>
  </Router>


But that still causes errors and is ugly code. Any suggestions on what I can do? Thanks
image.png
Was this page helpful?