使用react-router-dom的Link跳转后子React组件未渲染问题

问题说明 #

使用react-router-dom的Link组件通过URL传递id关联子组件时，点击链接后URL虽更新，但子组件未渲染，页面为空。已能获取id，但组件渲染逻辑存在问题，目标是实现点击父组件列表项后渲染对应子详情组件。

现有代码问题分析 #

1. 父组件（列表组件）错误：
   • 遍历Tasks时，key属性使用了params.id，这会导致所有列表项复用同一个key，React无法正确识别列表项的变化；且此处列表组件不需要调用useParams，该钩子应在子详情组件中使用。
2. 子组件（链接部分）错误：
   • Link的to属性写死为"/task/:id"，这是路由定义的占位符格式，实际跳转需要传入具体的任务id（如/task/1）。

修复后的代码示例 #

父组件（任务列表） #

import { Link } from 'react-router-dom';

const ParentComponent = ({ Tasks }) => {
  return (
    <div className="wrapper">
      {Tasks.map((task) => (
        <div key={task.id}> {/* 使用每个task的唯一id作为key */}
          <h3>{task.title}</h3>
          <h4>{task.author_name}</h4>
          {/* 跳转到带具体id的详情页 */}
          <Link to={`/task/${task.id}`}>查看详情</Link>
        </div>
      ))}
    </div>
  );
};

子组件（任务详情） #

import { useParams } from 'react-router-dom';

const TaskDetail = ({ Tasks }) => {
  const { id } = useParams(); // 在此处获取URL中的id
  // 根据id匹配对应的任务
  const currentTask = Tasks.find(task => task.id === id);

  if (!currentTask) {
    return <div>任务不存在</div>;
  }

  return (
    <div className="task-detail">
      <h2>{currentTask.title}</h2>
      <p>作者：{currentTask.author_name}</p>
      {/* 其他任务详情内容 */}
    </div>
  );
};

路由配置补充 #

确保路由配置中正确定义详情页的规则：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import ParentComponent from './ParentComponent';
import TaskDetail from './TaskDetail';

function App() {
  // 假设yourTasksData是你的任务数据源
  const yourTasksData = [/* 任务数据 */];

  return (
    <Router>
      <Routes>
        <Route path="/" element={<ParentComponent Tasks={yourTasksData} />} />
        {/* 定义带参数的详情页路由 */}
        <Route path="/task/:id" element={<TaskDetail Tasks={yourTasksData} />} />
      </Routes>
    </Router>
  );
}

关键修复点总结 #

• 列表组件的key必须使用每个项的唯一标识（如task.id），避免复用同一个值。
• Link的to属性要传入包含具体id的真实路径，而非路由占位符格式。
• useParams应在子详情组件中调用，用于获取URL参数，列表组件无需使用该钩子。
• 确保路由配置正确定义带参数的路由规则，将详情组件挂载到对应路径上。

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