Attempted import error: 'useLocation' is not exported from 'react-router-dom'

[imgnx]

So, I tried to get the Animated Switch working, but I got this error message. I did some research and found out that useLocation is exported from react-router, but not react-router-dom. I switched the rrt package to import from react-router instead and I got a Route that was positioned absolutely so that everything that is supposed to be beneath it was behind it.

Basically, my footer was up where it says "Projects"

[SaniJasi]

Please update react-router-dom for the latest version!

[pfloresl]

same issue here.

[maisano]

react-router-dom is a peer dependency, with a minimum major of 5. In order to use this package, as @SaniJasi suggests, upgrade the version of react-router-dom that you're using to at least 5.

@internationalhouseofdonald if you want to transition your entire content section (and need to use absolute positioning), this is more of a layout concern. You might endeavor to use a sticky footer, or provide a minimum content height, though it really depends on the intent of your design + the desired transition.

[pfloresl]

using react-router-dom react-router-dom@5.1.2",

[maisano]

@pfloresl which version of react-router do you have installed? Do you have both of these packages installed, or are you relying on react-router as a transitive dependency. I ask because you might have both discretely installed, and at different versions–react-router-dom proxies all exports from react-router.

[pfloresl]

noreact-router. i have "react-dom": "^16.12.0", "react-router-dom": "^5.1.2", "react-router-transition": "^2.0.0","react": "^16.12.0",

[josh231101]

This is not working. Someone please help

[josh231101]

Simple solution inside your parent component that renders the route

useEffect(() => { window.scrollTo(0, 0); }, [])