I am using react router dom loader function
https://reactrouter.com/en/main/route/loader

<BrowserRouter>
      <Routes>
        <Route
          path={'/ap'}
          loader={() => {
            console.log('0000');
            return 'ss';
          }}
          element={<App />}
        ></Route>
      </Routes>
    </BrowserRouter>

when I check on console it is not called or in other words message is not printed..
here is my code
https://stackblitz.com/edit/vitejs-vite-6gg4ab?file=src%2FApp.tsx,src%2Fmain.tsx&terminal=dev

function App() {
  const [count, setCount] = useState(0);
  const data = useLoaderData();
  console.log('----s', data);
  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
    </>
  );
}

i am trying to fetch some data before routing .. don’t know where i. am doing wrong