React Router Dom (v 6.4.3) page becomes unresponsive after navigation

Question

My page is becoming unresponsive when I try to navigate using useNavigate or a Link in my component. After clicking a button or link, the url will change, and the javascript inside the target component will execute, but the page does not re-render. useNavigate works with other components in my app, so I'm not quite sure what the issue is. Any input would be appreciated!

Dashboard.js:

import { useNavigate, Link } from "react-router-dom";

const Dashboard = () => {
  console.log("hello from dashboard");
  let navigate = useNavigate();
  return (
    <div>
      <Link className="pl-20" to="/test">
        test
      </Link>
    </div>
  );
};

export default Dashboard;

Test.js:

import React from "react";

const Test = () => {
  console.log("hello from test page");
  return <div>this is the test page</div>;
};

export default Test;

App.js:

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Dashboard from "./pages/Dashboard";
import Test from "./pages/Test";


function App() {
  return (
    <>
      <Nav />
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/test" element={<Test />} />
      </Routes>
    </>
  );
}

gif showing the issue

Answer 1

you gave pl-20 class on Dashboard. but not on Test component. Please check.