Сложность использования функции загрузчика в React-router 7.1.3 ⇐ Javascript

[Anonymous]

Я использую React-Router 7.1.3 и столкнулся с проблемой с загрузчиком. Я не уверен, как его использовать, и в учебнике, которому я следую, используется response-router-dom, который сильно отличается от новой версии.
App.jsx

Код: Выделить всё

import './App.css'
import { Routes, Route } from "react-router";
import Homepage from './Pages/HomePage/Homepage';
import Store from './Pages/Store/Store';
import About from './Components/About';
import Blog from './Components/Blog';
import Navbar from './Components/Navbar';
import SingleBook from './Pages/Store/SingleBook';

function App() {
return (








fetch(`http://localhost:3000/books/book/${params.id}`)}
/>


)
}

export default App

Проблема, с которой я сталкиваюсь, заключается в маршруте/book/: id . Ошибки, которые я получаю: < /p>

Код: Выделить всё

Uncaught Error: useLoaderData must be used within a data router.  See https://reactrouter.com/en/main/routers/picking-a-router.
at invariant (react-router.js?v=2d8b4bb3:1189:11)
at useDataRouterState (react-router.js?v=2d8b4bb3:5492:3)
at useLoaderData (react-router.js?v=2d8b4bb3:5552:15)
at SingleBook (SingleBook.jsx:5:17)
at renderWithHooks (chunk-VIJJTZRL.js?v=2d8b4bb3:11596:26)
at mountIndeterminateComponent (chunk-VIJJTZRL.js?v=2d8b4bb3:14974:21)
at beginWork (chunk-VIJJTZRL.js?v=2d8b4bb3:15962:22)
at HTMLUnknownElement.callCallback2 (chunk-VIJJTZRL.js?v=2d8b4bb3:3680:22)
at Object.invokeGuardedCallbackDev (chunk-VIJJTZRL.js?v=2d8b4bb3:3705:24)
at invokeGuardedCallback (chunk-VIJJTZRL.js?v=2d8b4bb3:3739:39)
< /code>
и в singlebook.jsx я написал: < /p>
import { useLoaderData } from "react-router"

const SingleBook = () => {
const { _id } = useLoaderData();
return (

Single Book: {_id}

)
}

export default SingleBook

Package.json
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.5.1",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-icons": "^5.4.0",
"react-router": "^7.1.3",
"swiper": "^11.2.1",
"tailwindcss": "^3.4.17"
},
"devDependencies": {
"@eslint/js": "^9.17.0",
"@types/react": "^18.3.18",
"@types/react-dom": "^18.3.5",
"@vitejs/plugin-react": "^4.3.4",
"eslint": "^9.17.0",
"eslint-plugin-react": "^7.37.2",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.16",
"globals": "^15.14.0",
"vite": "^6.0.5"
}
}
< /code>
Я попытался искать об этом, и ничто не помогает. Должен ли я понизить обдействие, чтобы также использовать функцию загрузчика в этой версии?


Подробнее здесь: https://stackoverflow.com/questions/793 ... uter-7-1-3