history.pu sh со значком выхода - PullRequest
Новая
       23

history.pu sh со значком выхода

2 голосов
/ 22 марта 2020

Я использую значок пользовательского интерфейса в качестве кнопки выхода из системы. Я использую его следующим образом: 

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 не является объектом (оценивает 'props.history.pu sh')

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>
  );
}

Как устранить проблему с перенаправлением?

1 Ответ

1 голос
/ 22 марта 2020

Я бы попробовал использовать 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>
   )
}

Надеюсь, это поможет!

...