React Router V6.10动态路由URL变更但组件不渲染问题求助

问题场景 #

使用React Router的Link组件跳转到动态路由页面（如/course/:courseShortName）时，URL成功变更，但目标组件（CourseDetails）未重新渲染，仅刷新页面后才能正常显示内容。首页等非动态路由页面的跳转均正常。

代码复现 #

App.tsx #

const App = () => {
  return (
    <BrowserRouter>
      <Header />
      <Routes>
        <Route element={<HomePage />} path="/"></Route>
        <Route element={<CourseCategory />} path="/course-category"></Route>

        {/* 问题出现的路由 */}
        <Route element={<CourseDetails />} path="/course/:courseShortName"></Route>

        <Route element={<Article />} path="/article"></Route>
        <Route element={<LoginPage />} path="/login"></Route>
        <Route element={<RegisterPage />} path="/register"></Route>
      </Routes>
      <Footer />
    </BrowserRouter>
  );
}

Header.tsx #

<Link to="/course/css" > title </Link>

CourseDetails.tsx（原问题代码） #

const { courseShortName } = useParams();

/* 该函数用于获取数据展示 */
fetchSelectedCourse({ courseShortName })

问题原因 #

当从一个动态路由页面（如/course/css）跳转到同路由不同参数的页面（如/course/js）时，React Router不会重新挂载CourseDetails组件，仅会更新路由参数。原代码中fetchSelectedCourse直接写在组件体中，只会在组件首次挂载时执行一次，参数变化时不会重新触发数据请求，导致页面内容未更新。

解决方案 #

使用useEffect监听路由参数courseShortName的变化，当参数更新时重新调用数据请求函数：

修改后的CourseDetails.tsx #

import { useParams, useEffect } from 'react';

const CourseDetails = () => {
  const { courseShortName } = useParams();

  useEffect(() => {
    // 确保参数存在时再请求数据
    if (courseShortName) {
      fetchSelectedCourse({ courseShortName });
    }
  }, [courseShortName]); // 依赖项添加courseShortName，参数变化时触发

  // ... 组件其他逻辑
  return (
    // ... 组件渲染内容
  );
}

额外检查点 #

• 如果fetchSelectedCourse内部使用了缓存机制，需确保缓存会根据courseShortName的变化失效，避免返回旧数据。
• 确认fetchSelectedCourse函数本身能正确处理新参数，没有参数未更新的情况。

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