Dans le code ci-dessous "CameraPage.tsx", une logique est créée. Sa fonction est de rechercher des images de caméra. Il envoie simplement une requête GET pour rechercher des images enregistrées dans le backend. sera introduit plus tard, et l'opération est correcte.

Lorsque l'utilisateur clique sur "InfoOutlineIcon", une autre page devrait se charger en affichant l'image, mais en cliquant dessus, une autre page s'ouvre mais n'affiche pas l'image. Le problème qui se pose est que lorsque vous cliquez, le console.log montre que l'image est chargée, mais lorsqu'une nouvelle page est ouverte, il semble que tout repart de zéro et qu'aucune requête n'est faite, donc aucune image n'est chargée/affichée sur le front-end.

// CameraPage.tsx FILE CODE function CameraPage() { const fetchCameraImage = async (cameraId: number, currentPageImages: number): Promise => { if (!accessToken) { console.log("Access token not found"); return false; } try { console.log("Calling responseFetchCameraImage"); let responseFetchCameraImage; const page = currentPageImages > 0 ? currentPageImages : 1; const size = 20; responseFetchCameraImage = await axios.get(`${API_URL}/api/v1/imagens/pagination/${cameraId}?page=${page}&size=${size}`, { headers: { Authorization: `Bearer ${accessToken}` }, }); console.log(responseFetchCameraImage) if (responseFetchCameraImage.status === 200) { const images = responseFetchCameraImage.data.items; const cameraImages = images.filter((image: any) => image.camera_id === cameraId); console.log(cameraImages) if (cameraImages && cameraImages.length > 0) { const uniqueImagesData: ImageData[] = []; cameraImages.forEach((image: any) => { const imageData: ImageData = { imageURL: `data:image/jpg;base64,${image.image}`, data: image.data, placa: image.placa, score: image.score, }; uniqueImagesData.push(imageData); }); setImageData(uniqueImagesData); console.log("Images found"); return true; } else { console.error("This camera has no images yet"); return false; } } else { console.error("Error while trying to fetch camera images"); return false; } } catch (error) { console.error("Error while trying to fetch camera images"); errorTimeout = setTimeout(() => { setError(""); }, 3000); return false; } }; useEffect(() => { const fetchData = async () => { if (editingCameraId !== null) { const success = await fetchCameraImage(editingCameraId, currentPageImages); if (success) { setCurrentPageImages(1); setImageCounter(0); } } }; fetchData(); }, [editingCameraId, currentPageImages]); return (     { const hasImage = await fetchCameraImage(camera.id, currentPageImages); if (hasImage) { routerAfterClickInfoCamera.push('CameraImages') } }} />  {camera.name}   ); } export default CameraPage;

Le code ci-dessous "CameraForm.tsx" est l'endroit où l'image doit être affichée, en utilisantrouterAfterClickInfoCamera.push('CameraForm')vous serez redirigé vers cette page, cependant, rien n'est affiché comme indiqué ci-dessous. Mais je ne comprends pas comment faire, j'ai fait des recherches mais je ne comprends pas, si quelqu'un peut m'aider, je lui serais reconnaissant.

// CameraForm.tsx FILE CODE export interface ImageData { imageURL: string; data: string; placa: string; score: number; } interface CameraModalProps { imageData?: ImageData[]; currentPageImages: number; imagesPerPage: number; } const CameraImages: React.FC = ({ imageData = [], currentPageImages, imagesPerPage, }) => { const [searchPlaca, setSearchPlaca] = useState(""); const startIndex = (currentPageImages - 1) * imagesPerPage; const endIndex = startIndex + imagesPerPage; // Filter images by placa const filterImagesByPlaca = () => { if (searchPlaca === "") { return imageData; } return imageData.filter((image) => image.placa.toLowerCase().includes(searchPlaca.toLowerCase()) ); }; // Get images filtered by placa const filteredImages = filterImagesByPlaca(); const visibleImages = filteredImages.slice(startIndex, endIndex) ?? []; return (