React Router动态参数未同步：导航栏我的Profile跳转后参数未更新

这个问题我之前也碰到过，核心原因是React Router在路由参数变化但组件未更换时，会复用已有的组件实例，而不是重新挂载。

当你从其他用户的主页点击导航栏的“我的主页”时，地址栏的URL虽然变了，但渲染的还是同一个UserPage组件。如果你的UserPage组件只在componentDidMount（类组件）里根据this.props.match.params.id加载用户数据，这个生命周期方法只会在组件第一次挂载时执行一次，后续路由参数变化时不会触发，导致页面还停留在之前的用户数据，看起来就像是this.props.match.params.id没更新（实际上props已经更新了，只是你的组件没响应这个变化）。

解决方法（分类组件/函数组件两种场景） #

1. 类组件场景（你的代码看起来是类组件）

有两种常用方案：

方案一：监听componentDidUpdate生命周期

在组件中添加componentDidUpdate方法，对比前后的路由参数，当id变化时重新加载用户数据：

// UserPage组件内部
componentDidMount() {
  // 首次挂载时加载数据
  this.loadUserInfo(this.props.match.params.id);
}

componentDidUpdate(prevProps) {
  // 检查路由参数是否发生变化
  if (prevProps.match.params.id !== this.props.match.params.id) {
    // 参数变化时重新加载数据
    this.loadUserInfo(this.props.match.params.id);
  }
}

// 封装加载用户数据的方法
loadUserInfo = (userId) => {
  // 这里替换成你实际的用户数据获取逻辑（比如调用API）
  fetch(`/api/users/${userId}`)
    .then(res => res.json())
    .then(userData => {
      this.setState({ user: userData });
    })
    .catch(err => console.error('加载用户数据失败:', err));
}

方案二：用key强制组件重新挂载

在路由配置中给UserPage组件添加key属性，值为路由参数id。这样每次id变化，key就会改变，React会销毁旧组件并创建新的组件实例，自然会重新执行componentDidMount：

<Route path="/userPage/:id" exact component={(props) => 
  <UserPage key={props.match.params.id} {...props} />
}/>

这个方法更简单，但会完全重建组件，适合逻辑简单的组件，避免不必要的性能开销。

2. 函数组件场景（如果后续迁移到函数组件）

使用useParams钩子获取路由参数，并通过useEffect监听参数变化：

import { useParams } from 'react-router-dom';
import { useEffect, useState } from 'react';

function UserPage() {
  const { id } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 每次id变化时重新加载数据
    const loadUserInfo = async () => {
      try {
        const res = await fetch(`/api/users/${id}`);
        const userData = await res.json();
        setUser(userData);
      } catch (err) {
        console.error('加载用户数据失败:', err);
      }
    };

    loadUserInfo();
  }, [id]); // 依赖项添加id，确保id变化时触发

  // 渲染逻辑...
}

小提示：修正导航栏的代码错误 #

你的导航栏Link标签有个语法错误，开头是<Link>但结尾用了</button>，应该改成：

<Link to={"/userPage/" + JSON.parse(localStorage.getItem('user')).id}>My Profile</Link>

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