React Router: Как перемещаться из кнопки «Просмотр» таблицы и передать идентификатор в компонент детализации? ⇐ Javascript

[Anonymous]

У меня есть таблица, в которой перечислены модули. Каждая строка имеет кнопку просмотра. Когда пользователь нажимает на представление, я хочу:
перейти на страницу с подробной информацией (/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