如何使用 React Router Dom 将图像动态链接到页面？答案

【问题标题】：How to link an image to a page dynamically with React Router Dom?如何使用 React Router Dom 将图像动态链接到页面？
【发布时间】：2021-12-02 19:13:45
【问题描述】：

我有一个用于网站投资组合的图片库，我正在尝试使用 react-router-dom 将每个图片链接到 React 中的不同页面，但我似乎无法理解代码有什么问题。

在过去的 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 (
    <Router>
      <Navbar/>
      <Routes>
        <Route path="/" element={<Inicio/>} />
        <Route path="trabalhos" element={<Trabalhos/>} />
        <Route path=":imagemid" element={<Imagem/>} /> 

            
        <Route path="contactos" element={<Contactos/>}/>
        {/* <Route path="*" element={<ErrorPage/>} />  */}
      </Routes>
      {/* <Footer /> */}
    </Router>
  );
}

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 (
        <div className="trabalhos">
        
              {thumbnails.map((novaImagem)=> (
                    <Link to ={`imagemid/${novaImagem.nome}`}>
                    
                          {<Thumbs 
                            key = {novaImagem.key}
                            url = {novaImagem.url}
                            nome = {novaImagem.nome}
                            titulo = {novaImagem.titulo}
                            desc = {novaImagem.desc}
                        /> }
                   </Link>

            ))}  
        </div>
    )
}

export default Trabalhos

我在图库页面中导入和映射的组件。我正在映射的信息在一个单独的 js 文件中。

import React from 'react';



function Thumbs(props) {
    
    return (
        <div className="thumbs">

            
         
            <img src={props.url} alt={props.nome} />
              
                 <div className="contentor">
                 
                    <h3>{props.titulo}</h3>
                    <p>{props.desc}</p>
                    
                </div>
                
            
        </div>
    )
}

export default Thumbs;

我要动态渲染的页面

import React from 'react';
import "./imagem.css";
import { useParams } from "react-router-dom"; 


function Imagem() {

    const { imagemid } = useParams();

    return (
        <div className="imagem">
            <h1>The work name is - {imagemid}</h1>
        </div>
    )
}

export default Imagem

提前致谢。

【问题讨论】：

标签： reactjs react-router-dom image-gallery

【解决方案1】：

Trabalhos 组件将缩略图映射到路径"/imagemid/${novaImagem.nome}"

<Link to ={`imagemid/${novaImagem.nome}`}>
  ...
</Link>

但是路径没有对应的匹配路由。最接近的是 <Route path=":imagemid" element={<Imagem/>} />，您正在尝试访问 imagemid 匹配参数。

如果是这种情况，那么 path 属性需要与您尝试链接的内容相匹配。

<Route path="/imagemid/:imagemid" element={<Imagem/>} />

【讨论】：