javascript - React components routing do not detect localstorage changes after routing -

i built login component , when user put data , press button, localstorage store jwtoken. during routing component validated authoriziation function, easy (if user has role, return component otherwise return component shows "not authorized").

the problem when user has been logged , login component event moves user next component, appears not authorizedcomponent, strange thing when referesh browser f5 key, correct , authorized component appears.

import react 'react'; import { route, browserrouter, switch  } 'react-router-dom'; import login './components/login/login'; import storeselection './components/stores/storeselection'; import authhandler './security/auth';  const routerhandler = () => (       <browserrouter >         <switch>             <route exact  path="/login" component={ login }></route>             <route exact  path="/store-selection" component={ authhandler(storeselection, ['role_root']) }></route>         </switch>      </browserrouter> );     export default routerhandler; 

on login component

componentwillmount(){      authenticationstore.on('onauthsuccess', () => {         console.log(this.props)         this.props.history.push('/store-selection');       });       authenticationstore.on('onautherror', (err) => {         console.error(err)         this.setstate({errors: [err]});      });  } 

thanks!