react-router v5.1.0 Cannot read property 'location' of undefined ,

Question

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 green

Here 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?

Answer 1

You need to move BrowserRouter out of that component. The best is to move it to index.js and enclose <App />