Cannot use useRouter about react

[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!