React组件路由参数变化时不重新渲染，如何解决？

配置了如下路由：

<Route path='/video/:id' element={<Component/>} />

在对应组件中通过useState声明了videoId状态并赋值为params.id，但处于/video/asdya123路径时，点击跳转至/video/di1h122路径的元素后，组件并未重新渲染。相关代码片段如下：

const [videoId, setVideoId] = useState('');

useEffect(() => {
  if (type === 'video') setVideoId(params.videoId);
  if (type === 'playlist') setVideoId(playlistItems.contents[playlistIndex].video.videoId);
}, []);

useEffect(() => {
   // 这里执行数据请求操作
}, [videoId]);  

if (videoId) {
  // ...
}

请问如何实现URL变化时组件重新渲染？

问题核心在于第一个useEffect的依赖数组为空，它仅会在组件首次挂载时执行一次。当URL变化导致路由参数params.videoId更新时，该useEffect不会重新触发，videoId状态也就无法同步更新，最终依赖videoId的逻辑和组件渲染都不会触发。

你可以通过以下两种方式解决：

方式一：更新useEffect的依赖数组 #

将params.videoId、type、playlistItems、playlistIndex这些可能变化的变量加入第一个useEffect的依赖数组，确保路由参数或相关状态变更时，能自动更新videoId：

useEffect(() => {
  if (type === 'video') setVideoId(params.videoId);
  if (type === 'playlist') setVideoId(playlistItems.contents[playlistIndex].video.videoId);
}, [params.videoId, type, playlistItems, playlistIndex]);

方式二：直接使用路由参数作为依赖（省略额外状态） #

如果videoId仅用于触发数据请求，你可以直接用路由参数和相关变量作为第二个useEffect的依赖，省去额外的useState声明，逻辑更简洁：

useEffect(() => {
  let currentVideoId = params.videoId;
  if (type === 'playlist') {
    currentVideoId = playlistItems.contents[playlistIndex].video.videoId;
  }
  // 这里用currentVideoId执行数据请求操作
}, [params.videoId, type, playlistItems, playlistIndex]);

另外，如果你使用React Router v6，useParams返回的参数本身是响应式的，直接将其用于渲染逻辑也会触发组件在URL变化时自动重新渲染。

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