Estoy tratando de cambiar el color de fondo de mi contenedor en función de la URL de la página, por lo que si el usuario navega a la URL '/movie' , debería cambiar el fondo, por ejemplo, a rojo; de lo contrario, debería establecer el fondo en verde.
Aquí está mi 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; `;Desafortunadamente, recibo el siguiente 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)¿Qué debo hacer para solucionar este problema?
Debe mover BrowserRouter fuera de ese componente. Lo mejor es moverlo a index.js y adjuntar <App />
Está utilizando useLocation fuera de los componentes envueltos por el enrutador, en su caso, el componente raíz (dentro app.js ) es el envoltorio del componente del enrutador.
verifique esto , podría ver la diferencia cuando usa ese gancho en los componentes App.tsx y QueryReducer .