Estoy tratando de usar el enlace "useHistory" de 'react-router-dom' y me encuentro con el error ' TypeError: Cannot read properties of undefined (reading 'push') '. A continuación se muestra mi código.
import './App.css'; import { React, useState } from 'react' import Header from './Header'; import Register from './Register'; import Login from './Login'; import { BrowserRouter as Router, Switch, Route, useHistory } from 'react-router-dom' function App() { const [ loggedIn, setLoggedIn ] = useState(false) const history = useHistory() return ( <Router> <Header /> <Switch> <Route exact path='/'> {loggedIn ? <h1>Logged In</h1> : <Register setLoggedIn={setLoggedIn} />} </Route> <Route path='/log-in'> {loggedIn ? () => history.push('/') : <Login setLoggedIn={setLoggedIn} loggedIn={loggedIn} />} </Route> </Switch> </Router> ); } export default App;¿Por qué 'history.push' está causando este error dentro de mi operador ternario?
import { React, useState } from 'react' import { BrowserRouter as Router, Switch, Route, useHistory } from 'react-router-dom' import Login from './login'; function App() { return ( <Router> <Switch> <Route path='/log-in'> <Login/> </Route> </Switch> </Router> ); } export default App; import { useEffect, useState } from "react" import { useHistory } from "react-router-dom" const Login=()=>{ const history=useHistory() const [loggedin,setloggedin]=useState(true) useEffect(()=>{ if(!loggedin){ history.push("/") } },[loggedin]) return( <div>login</div> ) } export default LoginEn su código, solo se ejecutará el código dentro de su ruta, es decir
{loggedIn ? () => history.push('/') : <Login setLoggedIn={setLoggedIn} loggedIn={loggedIn} />}En el que no se ejecutará el código dentro del componente de su aplicación. Puedes probar el código anterior.