[QoL] Warn on missing react-router context

[jvhoven]

When testing one of my components that uses the useReactRouter hook, I got the following error:

Cannot destructure property `history` of 'undefined' or 'null'.

      19 |   active
      20 | }) => {
    > 21 |   const { history } = useReactRouter();
         |                                     ^
      22 |
      23 |   const classes = active
      24 |     ? 'slider__item slider__item--active'

The error itself is a bit ambiguous as it originates from the hook not being able to find the React-Router context. Perhaps a nice addition would be to warn/error on not being able to find the React-Router context.

[quisido]

What version of react-router are you using? The installation instructions mention 4.4+, using react-router@next to get that version. If that doesn't fix your issue, let me know your version (4.4+), and I'll try to match this package to that react-router version.

[jvhoven]

The version I am using is react-router": "^4.4.0-beta.6. Perhaps I wasn't clear in my original explanation as I'm only suggesting to add a warning or error upon using this hook outside the context of react-router.

To clarify; I have a test in which I was testing a component that uses the use-react-router hook but I was not initializing a StaticRouter or BrowserRouter around the component:

import ComponentWithHook, { Props } from '...';
import renderer from 'react-test-renderer';

test('should render component', () => {
  const component = renderer.create(
    <ComponentWithHook />
  );

  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

Therefore it gave me the aforementioned error:

Cannot destructure property `history` of 'undefined' or 'null'.
      19 |   active
      20 | }) => {
    > 21 |   const { history } = useReactRouter();
         |                                     ^
      22 |
      23 |   const classes = active
      24 |     ? 'slider__item slider__item--active'

Which got me confused for a bit why it would not unpack { history }. Of course it made sense after thinking about it, and I came to the conclusion that I was missing the react-router context. Perhaps the following message would be nice:

Warning: you're using use-react-router outside the router-context

Sorry for doing a poor job of explaining in my original comment. Merry christmas!

[quisido]

Gotcha. An error message for this scenario should be deployed in 1.0.3. Thanks for the feedback!

[konsumer]

I am getting an error:

Error: use-react-router may only be used within a react-router context.

Using next versions of react-router, react, & react-dom.

here is a codesandbox.

[quisido]

Can you provide the specific version number of react-router as listed in your package.json file?

[konsumer]

Hmm. In the codesandbox it's not working (same problem that I originally had), but if I download it and install/run it locally it does. I used next in package.json, and pulled use-react-router out of the app when it wasn't working, so I'm not sure what version it was using. Now, locally it's 4.4.0-beta.6 (check package-lock) and that seems to work ok, so I will give it another try in the original app.