I am using react-router-dom to navigate through pages in my practice project. I can navigate to a particular page using the Link tag but when I click on the back button on the browser the URL of the page changes but the contents of that page is not rendered, I have to refresh the page in order for it to come back.

index.js

import React, { lazy } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import './index.css';

const App = lazy(() => import('./App'));
const Login = lazy(() => import('./Login'));

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route exact path='/' element={<App />} />
        <Route path='/login' element={<Login />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

App.js

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

const App = () => {
  return (
    <div className="App">
      <Link to='login'>Login</Link>
    </div>
  );
}

export default App;

Login.jsx

import React from 'react'

const Login = () => {
  return (
    <div>Login</div>
  )
}

export default Login;