history.push 与注销图标

Question

我正在使用材质 ui 图标作为注销按钮。我这样使用它：function logout(props:any){  localStorage.removeItem("token");  return(    <Redirect to="/login" />  )  //props.history.push("/login");} <ExitToAppIcon onClick={logout}></ExitToAppIcon>当我单击该图标时，令牌会从 localStorage 中删除，但它不会重定向到/login页面，如果我使用该行props.history.push("/login");而不是Redirect，页面会崩溃并给我这个错误：TypeError: undefined is not an object (评估'props.history.push')应用程序.tsx：const token = localStorage.getItem('token');export default function App() {  return (    <div>      <BrowserRouter>      <Switch>      <Route exact path='/' component= {HomePage}></Route>      <Route path='/login' component= {LoginPage}></Route>      <PrivateRoute      path='/panel'      isAuthenticated={token}      component={PanelHomePage}      />      <Redirect from='*' to='/404' />      </Switch>      </BrowserRouter>    </div>  );}如何解决重定向问题？

Answer 1

我会尝试使用useHistory文档中的钩子：

该useHistory钩子使您可以访问可用于导航的历史实例。

如下所示：

import { useHistory } from 'react-router-dom';

const YourComponent = () => {

   let history = useHistory();

   const logout = () => {

      localStorage.removeItem('token');

      history.push('/login');

   }

   /* rest of your component code */

   return (

       { /* your other elements */ }

       <ExitToAppIcon onClick={logout}></ExitToAppIcon>

   )

}

我希望这有帮助！