Блог

У меня есть галерея изображений для портфолио веб-сайтов, и я пытаюсь сделать ссылку на каждое изображение на другую страницу в React с помощью react-router-dom, но, похоже, я не могу понять, что не так с кодом.

Последние 3 дня я ломал голову над этим, пробовал разные подходы, но безрезультатно. Кто-нибудь может мне помочь, пожалуйста? Я довольно новичок в программировании.

Это страница моего приложения, на которой я объявил свои маршруты

 import './App.css'; import { BrowserRouter as Router, Routes, Route} from "react-router-dom"; import Inicio from './components/Routes/Inicio/Inicio'; import Trabalhos from './components/Routes/Trabalhos/Trabalhos'; import Navbar from './components/Navbar/Navbar'; // import Footer from './components/Footer/Footer'; import Contactos from './components/Routes/Contactos/Contactos'; // import ErrorPage from './components/Routes/ErrorPage/ErrorPage'; import Imagem from './components/Routes/Trabalhos/Imagem';   function App() {  return (  lt;Routergt;  lt;Navbar/gt;  lt;Routesgt;  lt;Route path="/" element={lt;Inicio/gt;} /gt;  lt;Route path="trabalhos" element={lt;Trabalhos/gt;} /gt;  lt;Route path=":imagemid" element={lt;Imagem/gt;} /gt;      lt;Route path="contactos" element={lt;Contactos/gt;}/gt;  {/* lt;Route path="*" element={lt;ErrorPage/gt;} /gt; */}  lt;/Routesgt;  {/* lt;Footer /gt; */}  lt;/Routergt;  ); }  export default App;  

Страница галереи:

 import React from 'react'; import "./trabalhos.css"; import thumbnails from '../../thumbnails'; import Thumbs from './Thumbs'; import { Link } from "react-router-dom";   function Trabalhos() {      return (  lt;div className="trabalhos"gt;    {thumbnails.map((novaImagem)=gt; (  lt;Link to ={`imagemid/${novaImagem.nome}`}gt;    {lt;Thumbs   key = {novaImagem.key}  url = {novaImagem.url}  nome = {novaImagem.nome}  titulo = {novaImagem.titulo}  desc = {novaImagem.desc}  /gt; }  lt;/Linkgt;   ))}   lt;/divgt;  ) }  export default Trabalhos  

The component I’m importing and mapped in the gallery page. The information I’m mapping is on a seperate js file.

 import React from 'react';    function Thumbs(props) {    return (  lt;div className="thumbs"gt;       lt;img src={props.url} alt={props.nome} /gt;    lt;div className="contentor"gt;    lt;h3gt;{props.titulo}lt;/h3gt;  lt;pgt;{props.desc}lt;/pgt;    lt;/divgt;      lt;/divgt;  ) }  export default Thumbs;  

Страница, которую я хочу визуализировать динамически

 import React from 'react'; import "./imagem.css"; import { useParams } from "react-router-dom";    function Imagem() {   const { imagemid } = useParams();   return (  lt;div className="imagem"gt;  lt;h1gt;The work name is - {imagemid}lt;/h1gt;  lt;/divgt;  ) }  export default Imagem  

Заранее спасибо.

Trabalhos Компонент сопоставляет миниатюры с путем "/imagemid/${novaImagem.nome}"

 lt;Link to ={`imagemid/${novaImagem.nome}`}gt;  ... lt;/Linkgt;  

Но для этого пути нет соответствующего соответствующего маршрута. Ближайший lt;Route path=":imagemid" element={lt;Imagem/gt;} /gt; — это место, где вы пытаетесь получить доступ imagemid к параметру соответствия.

Если это так, то path реквизит должен соответствовать тому, на что вы пытаетесь установить ссылку.

 lt;Route path="/imagemid/:imagemid" element={lt;Imagem/gt;} /gt;