Page does not load using window.href after login but loads when i go to url before login

Question

I am trying to redirect the user after login is done so I used window.location inside my Login.js that redirects to Home.js. However, after succesful login the page redirect to the url but doesn't load the page. But if I manually try to access the page before login then the page loads succesfully.

index.js:

import ReactDOM from 'react-dom';
import './index.css';
import Login from './Login'
import Home from './Home'
import {Route, BrowserRouter, Switch} from 'react-router-dom'
import {GlobalProvider} from './globalContext'

function Router(){

  return (
    <React.StrictMode>
        <BrowserRouter>
          <GlobalProvider>
            <BrowserRouter>
              <Route exact path ='/success' component={Home}/>
              <Route exact path ='/' component={Login}/>
            </BrowserRouter>
          </GlobalProvider>
        </BrowserRouter>
    </React.StrictMode>
  )
}

ReactDOM.render(
  <Router/>,
  document.getElementById('root')
);

Login.js:

import React, {useState, useContext, useEffect, setTimeout} from 'react';
import {login, returnCredentials} from './auth';
import  { GlobalContext } from './globalContext';

var hasLoginned = false;

export default function Auth(){

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const {tokenValue} = useContext(GlobalContext);
  const [token, setToken] = tokenValue

  useEffect(()=>{
    if(hasLoginned){
      console.log("token=",token);

      if(token){
        window.location = 'https://localhost:3000/succes'
      }
    };
  }, [token])

  const loginClicked = () => {
    login(username, password) // stores JSON object with access and refresh tokens.
    var credentials = returnCredentials()
    hasLoginned = true
    window.setTimeout(function(){
      console.log("credentials: ",credentials, "it has type of ", typeof(credentials))
      console.log(credentials[0])
      setToken(credentials[0])
    },2000)
  }

  return (
    <div>
      <label htmlFor="username">Username</label>
      <input id="username" type="text" placeholder="username" value={username}
        onChange={evt => setUsername(evt.target.value)}/>
        <br/>
      <label htmlFor="password">Password</label>
      <input id="password" type="password" placeholder="password" value={password}
        onChange={evt => setPassword(evt.target.value)}/>
        <br/>
      <button onClick={loginClicked}>Login</button>
    </div>
  )

}

Home.js:

export default function Home(){
    return (<div>Hello there!</div>)
}

What should I do?

Answer 1

Use This

window.location.href =  'https://localhost:3000/succes'

OR

import  { Redirect } from 'react-router-dom'

<Redirect to='/succes'  />