如何使用React Router Dom实现图库图片到页面的动态跳转？

问题根因 #

• 路由路径与跳转路径不匹配：你定义的Imagem路由是根路径下的动态参数:imagemid，但画廊页面的跳转路径是相对路径imagemid/${novaImagem.nome}，实际跳转后路径为/trabalhos/imagemid/xxx，和现有路由规则完全不匹配
• 动态路由优先级错误：根路径下的:imagemid路由优先级高于后续的contactos固定路由，会导致访问/contactos时被误识别为图片详情页
• 参数绑定错误：跳转路径未和路由定义的动态参数名对应，就算路径匹配也无法正确拿到imagemid参数

修复步骤 #

1. 修改App.js的路由定义
   把Imagem的路由改为trabalhos路径下的子动态路由，既符合业务逻辑，也不会干扰其他根路径路由：

// App.js 修改部分代码
function App() {
  return (
    <Router>
      <Navbar/>
      <Routes>
        <Route path="/" element={<Inicio/>} />
        <Route path="trabalhos" element={<Trabalhos/>} />
        {/* 把图片详情路由放在trabalhos路径下，动态参数名为imagemid */}
        <Route path="/trabalhos/:imagemid" element={<Imagem/>} /> 
        <Route path="contactos" element={<Contactos/>}/>
        {/* <Route path="*" element={<ErrorPage/>} />  */}
      </Routes>
      {/* <Footer /> */}
    </Router>
  );
}

2. 修改画廊页面Trabalhos组件的跳转链接
   把Link的to属性改为和路由匹配的绝对路径，去掉多余的imagemid/前缀：

// Trabalhos.js 修改部分代码
{thumbnails.map((novaImagem)=> (
  // 跳转路径对应路由定义的/trabalhos/[参数值]
  <Link to ={`/trabalhos/${novaImagem.nome}`} key={novaImagem.key}>
    <Thumbs 
      url = {novaImagem.url}
      nome = {novaImagem.nome}
      titulo = {novaImagem.titulo}
      desc = {novaImagem.desc}
    />
 </Link>
))}

小优化：把key属性放在循环的最外层Link组件上，符合React列表渲染规范

修改完成后重启项目，点击图片即可正常跳转到详情页，useParams()也能正确拿到对应imagemid的值。

内容的提问来源于stack exchange，提问作者António Salazar Antunes