"类型错误：使用'react-router-dom'钩子时无法读取未定义的属性(读取"push"'useHistory'

Question

我想使用"useHistory"从'react-router-dom'的钩子，我遇到了错误，'TypeError: Cannot read properties of undefined (reading 'push')'。下面是我的代码。

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;

为什么是历史?Push '导致这个错误在我的三元操作符?

Answer 1

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 Login

在你的代码中，路由中的代码只会被执行

{loggedIn ? () => history.push('/') : <Login setLoggedIn={setLoggedIn} loggedIn={loggedIn} />}

，其中应用组件中的代码将不会被执行。你可以试试上面的代码。