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?

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?

• javascript
• css
• reactjs
• react-router

• change const to let. Based on docs here -> reactrouter.com/web/api/Hooks – Dominik Matis Commented Sep 2, 2020 at 19:39
• no that is not working either – The Dead Man Commented Sep 2, 2020 at 19:50
• Can you post the full error? – sidthesloth Commented Sep 2, 2020 at 19:54
• @sidthesloth done check update – The Dead Man Commented Sep 2, 2020 at 19:56

2 Answers 2

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

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.