Cannot use useRouter

[mallowigi]

First of all, let me state that I was a huge fan of ui-router in angular.js and angular. I used it extensively for more than 6 years and it was my de-facto solution for routing. Therefore, when my company moved to React, I proposed UI-Router again but alas they preferred going with react-router due to the lack of documentation for React.

However now I'm on a new project at home and I decided to give it a shot. Unfortunately this is truly hard, and while in the angular project there were lots of good examples of how to use it, the react lib is truly lackluster. And now I'm stuck because I want to use the useRouter hook but get greeted by:

Error: UIRouter instance is undefined. Did you forget to include the <UIRouter> as root component?

As you can imagine, I did not forget UIRouter, as this is the basis of the library.

I'm using it like such:

ReactDOM.render(
  <React.StrictMode>
    <StylesProvider injectFirst>
      <RecoilRoot>
        <UIRouter
          config={config}
          plugins={[pushStateLocationPlugin]}
          states={states}
        >
          <App />
        </UIRouter>
      </RecoilRoot>
    </StylesProvider>
  </React.StrictMode>,
  document.getElementById('root'),
);

Can you help me point out what is wrong? I've looked all over github and SO and got no answer whatsoever. I'm seriously considering on giving up at this point.

Thanks.

[mallowigi]

Ok I have no idea why, but after I replaced with props.transition.router.stateService and executed a successful go, for an unknown reason now useRouter works again.

Truly speechless.

[christopherthielen]

@mallowigi thanks for the report... I'm not sure why this would happen. This commit is the only thing that seems remotely related: 834c755 which initializes the router object on the first render (and renders null), then renders the children on all subsequent renders. This code was written this way to handle react strict mode's intentional double renders.

The useRouter code is a simple wrapper for useContext and should have normal react context behaviors

https://github.com/ui-router/react/blob/master/src/hooks/useRouter.ts#L29

I dropped your code into a stackblitz and couldn't reproduce the problem https://stackblitz.com/edit/react-pwx5fi

I'm not sure what caused the behavior, but if it can be reproduced, I'd love to fix it in the codebase.

[christopherthielen]

Oh wow, I just encountered this same error! The problem was due to using useRouter inside the same component as the one that renders the <UIRouter/> component. In other words:

function App() {
  const currentState = useRouter().globals.current; // kaboom, the router isn't in context for this component

  return (
    <UIRouter
          config={config}
          plugins={[pushStateLocationPlugin]}
          states={states}
        >
         current state: {currentState.name}
         <UIView/>
        </UIRouter>
      </RecoilRoot>
    </StylesProvider>
  </React.StrictMode>
  );
);

In my case, pulling the <UIRouter/> up one level was what I needed to do:
https://github.com/ui-router/sticky-states/blob/master/examples/create-react-app/src/App.js#L36-L42

[mallowigi]

I don't think it was the same setup but I'll try to reproduce from a brand new project and tell you the results. Thanks!