react-router v5.1.0 Cannot read property 'location' of undefined ,
16,330
Solution 1
You need to move BrowserRouter
out of that component. The best is to move it to index.js
and enclose <App />
Solution 2
You're using useLocation
outside the components wrapped by the router, in your case the root component (inside app.js
) is the wrapper of the router component
please check this you could see the difference when you use that hook in App.tsx
and QueryReducer
components.
Author by
The Dead Man
Updated on June 06, 2022Comments
-
The Dead Man almost 2 years
I am trying to change the background color of my container based on page URL, so if user navigate to URL
'/movie'
it should change the background eg to red else it should set the background to greenHere is my index.js
import React from 'react'; import { BrowserRouter, Switch, Route, useLocation} from 'react-router-dom'; import styled from 'styled-components'; import Movies from 'pages/Movies/Movies' import Templates from 'pages/Movies/Templates' ; export default () => { const location = useLocation(); return ( <> <BrowserRouter> <Container style={{backgroundColor:location.pathname === '/movies' ? 'red' : 'green'}}> <Main> <App> <Switch> <Route path='/templates' component={Templates} /> <Route path='/movies' component={Movies} /> </Switch> </App> </Main> </Container> </BrowserRouter> </> ); } const Container = styled.div` min-height: 100vh; `;
Unfortunately, I am getting the following error
Uncaught TypeError: Cannot read property 'location' of undefined at useLocation (app.js:54283) at app.js:72792 at renderWithHooks (app.js:37714) at mountIndeterminateComponent (app.js:40129) at beginWork$1 (app.js:41478) at HTMLUnknownElement.callCallback (app.js:21756) at Object.invokeGuardedCallbackDev (app.js:21805) at invokeGuardedCallback (app.js:21860) at beginWork$$1 (app.js:47124) at performUnitOfWork (app.js:46032)
What do I need to do to solve this problem?
-
The Dead Man over 3 yearscan you show it via my ocode your solution I dont get it ?
-
The Dead Man over 3 yearsso what do I need to change though?
-
Dominik Matis over 3 yearsremove
<BrowserRouter>
and</BrowserRouter>
from that file and put it around<App/>
inindex.js
file -
Boussadjra Brahim over 3 yearsyou should move the router to the
index.js
hereReactDOM.render(<App />, document.getElementById('root'))
to wrap<App/>
-
Dominik Matis over 3 yearscodesandbox.io/s/friendly-wozniak-xtocw?file=/src/App.js here is the code
-
Sohail Saha almost 3 yearsI was looking for this exactly. Thank you!
-
maverick almost 3 yearsI already did that in my case. Still while testing, this is giving the same error in react-testing-library.
-
rbansal about 2 yearsThis works, thanks for the solution. Do you know the reason?