React中Link传参至目标页面失败，useParams无法获取参数求助

核心问题 #

你混淆了React Router两种传参方式的用法：

• 你通过Link的state属性传递的是路由状态参数，这类参数存储在路由的location对象中，不会暴露在URL里
• useParams()是用来读取URL路径参数的（也就是路由规则里定义的动态片段，比如/coursepage/:id中的id），所以用它去拿state里的参数自然拿不到

解决方式 #

方式一：继续用state传参，改用useLocation获取

在/coursepage页面中，替换useParams()为useLocation()钩子：

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

function CoursePage() {
  const location = useLocation();
  // 用可选链避免页面直接刷新时state丢失导致的报错
  const courseId = location.state?.id;
  
  // 后续逻辑中使用courseId即可
}

方式二：改用URL路径参数（参数会显示在URL中）

如果希望参数出现在URL里，需要调整路由配置和Link写法：

1. 修改路由配置，添加动态参数规则：

// 路由配置文件示例
import { Route, Routes } from 'react-router-dom';
import CoursePage from './CoursePage';

function AppRoutes() {
  return (
    <Routes>
      {/* 定义带id参数的路由 */}
      <Route path="/coursepage/:id" element={<CoursePage />} />
    </Routes>
  );
}

2. 修改Link的跳转路径：

<Link to={`/coursepage/${course._id}`}>
  {course._id}{course.topic}
</Link>

3. 此时就可以用useParams()获取参数了：

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

function CoursePage() {
  const { id } = useParams();
}

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