The error

useLoaderData must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.

indicates that the loader functionality isn’t active because your app isn’t using a router that supports the data APIs. The loader and useLoaderData hooks are part of the new data router APIs available in react-router-dom v6.4+ (or later) — not when using the classic / setup.

What’s Happening

• Your current setup is importing from "react-router" and using the classic component APIs.
• Loader functions (and the hook useLoaderData) require a data router context. That is provided by wrapping your app in a router created with, for example, createBrowserRouter and then rendered with the RouterProvider.
• If you want to use loader functions, you need to use the data router configuration which is available in react-router-dom starting with v6.4.

How to Fix

You have two main options:

1. Upgrade to react-router-dom with Data APIs

Install react-router-dom (if not already) and update your router configuration. For example:

JSXCopied
// index.jsx
import React from "react";
import ReactDOM from "react-dom";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import App from "./App";
import Homepage from "./Pages/HomePage/Homepage";
import Store from "./Pages/Store/Store";
import About from "./Components/About";
import Blog from "./Components/Blog";
import SingleBook from "./Pages/Store/SingleBook";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      { index: true, element: <Homepage /> },
      { path: "store", element: <Store /> },
      { path: "about", element: <About /> },
      { path: "blog", element: <Blog /> },
      {
        path: "book/:id",
        element: <SingleBook />,
        loader: ({ params }) =>
          fetch(`http://localhost:3000/books/book/${params.id}`)
      }
    ]
  }
]);

ReactDOM.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
  document.getElementById("root")
);

And then update your App.jsx to include an outlet for nested routes:

JSXCopied
// App.jsx
import './App.css'
import Navbar from './Components/Navbar'
import { Outlet } from "react-router-dom"

function App() {
  return (
    <>
      <Navbar />
      <Outlet />
    </>
  );
}

export default App;

This setup ensures your loader is used within a proper data router context and the useLoaderData hook will function correctly inside SingleBook.

2. Stick with the Classic Router (Without Loaders)

If you prefer to keep your current setup with react-router (and not using react-router-dom’s data APIs), you’ll need to manage data fetching inside your component (e.g., using useEffect in SingleBook) instead of relying on route loaders. This means removing the loader prop and moving your fetch logic into the component.

Recommendation

If you want to benefit from the loader functionality and modern data APIs, the recommended approach is to upgrade to react-router-dom with the data router API. This is closer to what your tutorial is demonstrating and will avoid the context error you’re encountering.

Let me know if you need further assistance with the migration or any code details!