import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Onboarding from './components/Onboarding/Onboarding';
import Login from './components/Login/Login';

function App() {
  return (
    <Router>
      <div className="flex justify-center w-[386px] h-[800px] mb-6 mt-5 ml-[35%] box-sizing:border-box rounded-sm overflow-auto -z-50">
        <Switch>
          <Route  exact path="/"  component={Onboarding} />
          
          <Route path="/login"  component={Login} />
        </Switch>
      </div>
    </Router>
  );
}

export default App;

when i am cliking on a button which will redirect me to the login page , So after clicking it URL is changing but page is not appearing until i reload the page.

 const handleRedirectToLogin = () => {
    history.push('/login'); // Navigate to /login route using navigate
  };
<button className="progress-button absolute bottom-4 right-4" onClick={handleRedirectToLogin}>
       <span className="icon">→</span>
 </button