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 />

Answer 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.