React动态路由问题：点击按钮无法渲染WorkDetails组件

问题概述 #

学习React动态路由时，给每个作品加了按钮，本来想点击按钮或者手动修改URL里的slug就能渲染WorkDetails组件，但怎么试都没效果，找不到问题出在哪。

关键代码排查点 #

1. App组件的路由配置 #

先看App.js里的路由结构：

必须用<Routes>包裹所有<Route>，而且WorkDetails的动态路由路径得写对：

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/works" element={<Works />} />
  {/* 动态路由要按这种格式写，别把路径写错 */}
  <Route path="/works/:slug" element={<WorkDetails />} />
</Routes>

要是动态路由放错位置（比如放在/works路由后面但未正确匹配），或者路径漏写前缀（比如写成/:slug），肯定匹配不上目标组件。

2. Work组件里的Link跳转逻辑 #

检查按钮外层的Link配置：

跳转路径得准确拼接作品的slug：

<Link to={`/works/${work.slug}`}>
  <button>查看详情</button>
</Link>

要是to属性里的路径和动态路由的path对不上（比如写成/work/${work.slug}少了个s），点击按钮自然跳不到正确页面。

3. WorkDetails组件的数据匹配逻辑 #

看一下用useParams获取slug和匹配数据的代码：

得正确拿到slug参数，并且用对字段匹配数据：

import { useParams } from 'react-router-dom';
import data from './data';

function WorkDetails() {
  const { slug } = useParams();
  // 必须用slug字段匹配数据，别误用id或其他字段
  const work = data.find(item => item.slug === slug);
  
  if (!work) return <div>作品不存在</div>;
  
  return (
    <div>
      <h2>{work.title}</h2>
      <p>{work.description}</p>
    </div>
  );
}

要是find方法里用错了匹配字段（比如item.id === slug），或者data.js里的作品根本没设置正确的slug字段，就找不到对应数据，组件自然没有内容渲染。

4. 根组件的路由包裹 #

别忘了在index.js里用BrowserRouter把整个App包裹起来：

import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

没加这个包裹的话，路由功能根本无法生效。

修复步骤总结 #

1. 确认index.js里用BrowserRouter完整包裹了App组件
2. 核对动态路由的path与Link的to路径完全一致
3. 检查useParams获取的参数名和路由中定义的参数名匹配（路由写:slug，就用const { slug } = useParams()）
4. 确保data.js里每个作品都有正确的slug字段，且与跳转用的slug值一致

内容的提问来源于stack exchange，提问作者springoftwentyone