Code Monkey home page Code Monkey logo

Comments (6)

konsumer avatar konsumer commented on June 19, 2024 1

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.

from use-react-router.

quisido avatar quisido commented on June 19, 2024

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.

from use-react-router.

jvhoven avatar jvhoven commented on June 19, 2024

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!

from use-react-router.

quisido avatar quisido commented on June 19, 2024

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

from use-react-router.

quisido avatar quisido commented on June 19, 2024

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

from use-react-router.

konsumer avatar konsumer commented on June 19, 2024

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.

from use-react-router.

Related Issues (19)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.