У меня есть таблица, в которой перечислены модули. Каждая строка имеет кнопку просмотра. Когда пользователь нажимает на представление, я хочу:
перейти на страницу с подробной информацией (/modules/: id)
Использовать этот идентификатор в компоненте деталей, чтобы извлечь/загрузить данные модуля.
Какой правильный способ пройти идентификатор и прочитать его в целевом компоненте. Дайте мне несколько предложений. < /p>
import React, { useEffect, useState } from "react";
import { listOfCourseModules } from "../api/fileService";
import { useNavigate } from "react-router-dom";
export const ModulesListComponent = () => {
const [modules, setModules] = useState([]);
const navigator = useNavigate();
useEffect(() => {
listOfCourseModules().then((response) => {
setModules(response.data);
console.log(response.data)
});
},[]);
const viewPdf = (id) =>{ // this is the part that I am trying to figure out.
navigator("/page/",{id})
}
return (
list of modules
module id
module name
module image
module file name
description
author
{modules.map((module) => (
{module.moduleId}
{module.moduleName}
{module.imagePath}
{module.filePath}
{module.description}
{module.author}
viewPdf(module.moduleId)}>view
))}
);
};
my other component....
import React from "react";
import { useParams } from "react-router-dom";
import PdfViewer from "./PdfViewer";
export const PdfPage = (id) => {
const pageNumber = parseInt(page) || 1;
return (
);
};
My app.jsx....
import { useState } from "react";
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { PdfPage } from './components/PdfPage';
import { FileUploadFormComponent } from "./components/FileUploadFormComponent";
import { ModulesListComponent } from "./components/ModulesListComponent";
function App() {
const [count, setCount] = useState(0);
return (
);
}
export default App;
pdfViewer.jsx....
import React, { useEffect, useState, useRef } from "react";
import * as pdfjsLib from "pdfjs-dist/build/pdf.mjs";
import workerUrl from "pdfjs-dist/build/pdf.worker.min.mjs?url";
import { getPdf, getPdfPage, totalPageNumber } from "../api/fileService";
import { Loader } from "./Loader";
pdfjsLib.GlobalWorkerOptions.workerSrc = workerUrl;
export default function PdfViewer({ moduleId, initialPage = 1 }) {
const [currentPage, setCurrentPage] = useState(initialPage);
const [numPages, setNumPages] = useState(0);
const canvasRef = useRef(null);
const [isPageLoading, setIsPageLoading] = useState(false);
// Fetch total pages when file changes
useEffect(() => {
if (!id) return;
const fetchTotalPages = async () => {
try {
const res = await totalPageNumber(moduleId);
setNumPages(res.data);
console.log(res.data);
} catch (err) {
console.error("Failed to get total pages:", err);
}
};
fetchTotalPages();
setCurrentPage(initialPage);
}, [fileName, initialPage]);
// Load current page
const loadPage = async (page) => {
try {
setIsPageLoading(true);
const response = await getPdfPage(moduleId);
const pdf = await pdfjsLib.getDocument({ data: response.data }).promise;
const pdfPage = await pdf.getPage(1);
const viewport = pdfPage.getViewport({ scale: 1.5 });
const canvas = canvasRef.current;
canvas.height = viewport.height;
canvas.width = viewport.width;
await pdfPage.render({
canvasContext: canvas.getContext("2d"),
viewport,
}).promise;
} catch (err) {
console.error(err);
alert("Page locked or unavailable");
} finally {
setIsPageLoading(false);
}
};
useEffect(() => {
if (fileName && currentPage > 0) {
loadPage(currentPage);
}
}, [fileName, currentPage]);
const handleNext = () => {
if (currentPage < numPages) setCurrentPage((prev) => prev + 1);
};
const handlePrev = () => {
if (currentPage > 1) setCurrentPage((prev) => prev - 1);
};
if (!filename) return Please select a PDF file;
return (
{isPageLoading && (
)}
Previous
Page {currentPage} / {numPages}
Next
);
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... -id-to-the
