I was trying to create this website. All the pages display fine but using routing, I wanted to move from one page to another using clicks. If I manually update the url and reload or press enter then the page reloads, but if I click on a component taking to other component, the url changes but the page remains the same. People were telling to downgrade to history 4.10.1. Downgrading doesn't seem to help. Please take a look.

import Topbar from "./components/topbar/Topbar";
import Home from "./pages/home/Home"
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import Settings from "./pages/settings/Settings";
import Write from "./pages/Write/Write";
import SinglePost from "./pages/singlePost/SinglePost";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { withRouter } from "react-router-dom/cjs/react-router-dom.min";

function App() {
  const currentUser = false;
  return (
    <Router>
      <Topbar />
      <Switch>
        {/* when only "/" is called then only home should be called i.e why we did exact*/}
        <Route exact path="/" component={<Home />} />

        <Route path="/posts">
          <Home />
        </Route>

        {/* If user is registered then send to homepage else send to register page  */}
        <Route exact path="/register">
          {currentUser ? <Home /> : <Register />}
        </Route>

        {/* If user is logged in then send to homepage else send to login page  */}
        <Route exact path="/login">
          {currentUser ? <Home /> : <Login />}
        </Route>

        {/* Open a single post which has a unique id which can uniquely identify that post. eg post/123 */}
        <Route exact path="/post/:id">
          <SinglePost />
        </Route>

        {/* If user exits then send to write page else send to login page */}
        <Route exact path="/write">
          {currentUser ? <Write /> : <Login />}
        </Route>

        <Route exact path="/settings">
          {currentUser ? <Settings /> : <Login />}
        </Route>

      </Switch>
    </Router>
  );
}

export default App;

Here is the json configuration

"history": "4.10.1",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "5.0.1",
"redux": "^4.0.5",
"web-vitals": "^2.1.4"