Stop Redirection Onsubmit() & Display Error Message Instead

I have a login screen. If the username & password are correct, a token is stored in local storage. If not, I was printing an error message 'Login Unsuccessful'. It was working

Solution 1:

Changes to localStorage.getItem('token') in App.tsx are not acted upon. You can fix this by using useState and useEffect.

const [token, setToken] = useState('');

useEffect(() => {
    setToken(localStorage.getItem('token'));
}, [localStorage.getItem('token')]);
...
      <PrivateRoute
      path='/panel'
      isAuthenticated={token}
      component={PanelHomePage}
      />
...