How to make redirect after cleaning localstorage?

Question

How, after cleaning the local storage, redirect to the desired page? Now a problem occurs, the user presses the button - Exit, localalstorage is cleared, but the redirection does not occur.

const onHandleSignOut = () => {
    localStorage.removeItem('session');
    return <Redirect to="/auth" />
}

<li className="header__mainmenu-item" onClick={() => onHandleSignOut()}>
    <FaSignOutAlt />
</li>

Does this answer your question? [How to redirect in React](https://stackoverflow.com/questions/46679318/how-to-redirect-in-react) — Yehor Androsov, Feb 29 '20 at 12:34
Does this answer your question? [Programmatically navigate using react router](https://stackoverflow.com/questions/31079081/programmatically-navigate-using-react-router) — keikai, Feb 29 '20 at 12:36

score 0 · Answer 1 · answered Feb 29 '20 at 13:02

0

this.props.history.push("/auth");

hope it will helpful for you...

answered Feb 29 '20 at 13:02

Pavan Nagadiya

652
4
10

score 0 · Answer 2 · answered Feb 29 '20 at 13:07

0

You can redirect directly using window.location.href = '/ulr_to_redirect';

answered Feb 29 '20 at 13:07

Carlos Osvaldo Chao Cortes

67
6

score 0 · Answer 3 · answered Feb 29 '20 at 13:11

you can create a component to make redirection after cleaning storage :

import { NavigationEvents } from 'react-navigation';
class Logout extends Component {

   _clearAsyncStorage = async () => {
     AsyncStorage.clear();
    };

    render() {
        const { navigate } = this.props.navigation;
         return (
         <View>
            <Text>Logout</Text>
              <NavigationEvents onDidFocus={() => navigate('Login')} />
            </View>
         );
    }
 }

Make sur that you have created your navigation inside the navigation component :

you can use react navigation v4 or v5 to create a stack navigation :

For me a added the logout link inside a drawer :

const AppDrawerNavigator = createDrawerNavigator(
 .... other components 
  Déconnexion: {
  screen: Logout,
  navigationOptions: {
    drawerIcon: ({ tintColor }) => (
      <Icon
        name={Platform.OS === 'ios' ? 'ios-exit' : 'md-exit'}
        size={30}
        style={styles(tintColor).drawerIcons}
        type="material"
      />
    ),
  },
)

How to make redirect after cleaning localstorage?

3 Answers3