SolidJS•2y ago•

58 replies

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

useNavigate

Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.

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

history.back

. But I cant refresh using

location.reload

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

Navigate

function by using the

Navigate

Navigate

component and then taking the function from the parameter passed in the

href

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>

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

How to call `useNavigate` outside of router

useNavigate

useNavigate

Uncaught Error: <A> and 'use' router primitives can be only used inside a Route.

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

history.back

. But I cant refresh using

location.reload

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

Navigate

function by using the

Navigate

Navigate

component and then taking the function from the parameter passed in the

href

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>

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

How to call `useNavigate` outside of router

Similar Threads

How to call `useNavigate` outside of router

Similar Threads

Similar Threads

Similar Threads