React路由匹配错误：点击详情按钮提示No routes matched location

问题根源 #

点击“more info”按钮出现No routes matched location错误，核心原因是路径不匹配：

• 在OurWork.jsx中，跳转链接写的是 /works/${work.id}（复数形式works）
• 但App.js里配置的详情页路由是 /work/:workId（单数形式work）

两个路径不一致，导致路由系统找不到对应的匹配规则。

修复步骤 #

修改OurWork.jsx中的Link路径，将复数works改为单数work：

// OurWork.jsx 修改后
import React from 'react';
import { Link } from 'react-router-dom';
import works from '../data';

function OurWork() {
  return (
    <section className='layout'>
        <h1>Works</h1>
        <div className="works">
          {works.map((work) => {
            return (
              <article key={work.id}>
                <h5>{work.name}</h5>
                {/* 修正路径：将/works改为/work */}
                <Link to={`/work/${work.id}`}>more info</Link>
              </article>
            );
          })}
        </div>
    </section>
  )
}

export default OurWork;

额外优化建议 #

当前SingleWork.jsx仅展示workId，可以补充数据获取逻辑，展示完整的作品信息：

// SingleWork.jsx 优化后
import React from 'react';
import { Link, useParams } from 'react-router-dom';
import works from '../data';

function SingleWork() {
  const { workId } = useParams();
  // 根据id匹配对应作品
  const currentWork = works.find(work => work.id === workId);

  // 处理数据不存在的边界情况
  if (!currentWork) {
    return (
      <div className='layout'>
        <h2>作品不存在</h2>
        <Link to='/work'>返回作品列表</Link>
      </div>
    )
  }

  return (
    <div className='layout'>
        <h2>{currentWork.name}</h2>
        {/* 注意：Unsplash原链接是页面地址，需改为图片直链才能正常加载 */}
        <img src={`${currentWork.image}?w=600`} alt={currentWork.name} />
        <Link to='/work'>返回作品列表</Link>
    </div>
  )
}

export default SingleWork;

内容的提问来源于stack exchange，提问作者Luis Alejandro Lopez de Anda