why loader function not called in react js?

May 2, 2024

I am using React-Router-DOM loader prop 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 and I don’t know what I am doing wrong.

>Solution :

Route loaders only work when using Data routers, e.g. routers created using createBrowserRouter, createMemoryRouter, etc. If you would like to use the Data APIs then you’ll need to convert to a Data router.

Examples:

import {
  createBrowserRouter,
  createRoutesFromElements,
  RouterProvider,
  Route,
} from 'react-router-dom';

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route
      path="/ap"
      loader={() => {
        console.log('0000');
        return 'ss';
      }}
      element={<App />}
    />
  )
);

...

<RouterProvider router={router} />

import {
  createBrowserRouter,
  RouterProvider,
  Route,
} from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/ap",
    loader: () => {
      console.log('0000');
      return 'ss';
    },
    element: <App />,
  },
]);

...

<RouterProvider router={router} />

For more information see: