Boa noite, estou com uma duvida!!
Fiz esse componente para poder ter acesso as imagens de cada filme que tera no projeto
Depois eu criei o componente para fazer o map de cada imagem do filme para que a pessoa possa clicar e ser redirecionado para a pagina com os detalhes do filme
Ao ser clicado na imagem, redireciona para a pagina com as informações do filme
Agora nas rotas eu não consigo passar o IImgPath da forma correta, já quebrei a cabeça e não consegui. Onde estou errando nesse caso
E aí! Beleza?
Então, no seu ImgPrincipal, vi que você tá usando o Link pra mandar pro detalhe do filme. Mas, pra garantir que o id da imagem seja passado certo, tem que dar uma olhada na prop to desse Link. Tipo assim:
<Link to={`/filme/${IImgPath.id}`}>
No PaginaFilme, tá usando o useParams pra pegar esse id do filme. Correto! Mas, certifica que a rota tá certinha lá no seu router. Se for o v5 do react-router-dom, saca só:
<Route path="/filme/:id" component={PaginaFilme} />
Agora, se for o v6, é assim:
<Route path="/filme/:id" element={<PaginaFilme />} />
Agora, presta atenção! No PaginaFilme, não vi onde você tá pegando esse caminho da imagem pra passar pro ImgPrincipal. Tá faltando isso, brother! Se IImgPath é o objeto que tem essa info, tem que garantir que ele chegue lá.
Imagina que você tem um array de filmes. Pra pegar o filme certo com base no id, faria algo assim:
const filme = listaFilmes.find(filme => filme.id === Number(id));
if (filme) {
// Mandando o IImgPath pro ImgPrincipal
return <ImgPrincipal IImgPath={{ path: filme.caminhoDaImagem, id: filme.id }} />;
}
Só ajusta a parte filme.caminhoDaImagem pro nome certo que você deu pro caminho da imagem.
Espero que essas dicas te coloquem nos trilhos! Qualquer coisa, dá um grito aí. Tamo junto e bons códigos!
Boa tarde, no caso do IImgPath, ele é uma interface. Esse aqui é o arquivo com os caminhos das imagens.
import pinoquio from "assets/img/pinoquio.jpg";
import exterminador from "assets/img/exterminador.jpg";
import homemFormiga from "assets/img/homem-formiga.jpg";
import jigsaw from "assets/img/jigsaw.jpg";
import mariaEjoao from "assets/img/maria-e-joao.jpg";
import oSegredo from "assets/img/o-segredo.jpg";
import infiltrado from "assets/img/infiltrado.jpg";
const caminhoImg = [
{ name: "pinoquio", id: 1, path: pinoquio },
{ name: "infiltrado", id: 2, path: infiltrado },
{ name: "jigsaw", id: 3, path: jigsaw },
{ name: "exterminador", id: 4, path: exterminador },
{ name: "homemFormiga", id: 5, path: homemFormiga },
{ name: "oSegredo", id: 6, path: oSegredo },
{ name: "mariaEjoao", id: 7, path: mariaEjoao },
];
export default caminhoImg;
Que é o import que fiz do caminhoDaImagem, fica na pasta Data