帶有注銷圖標的 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 ，頁面崩潰並給我這個錯誤：

類型錯誤：未定義不是對象（評估“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>
   )
}

我希望這有幫助！