带有注销图标的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：未定义不是对象（正在评估'props.history.push'）]

App.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挂钩使您可以访问可用于导航的历史记录实例。

类似于以下内容：

useHistory

我希望这会有所帮助！