React.js项目中如何在个人资料页面URL中传递用户名参数

1. 调整路由匹配规则 #

你当前的路由路径和目标URL前缀、参数数量都不匹配，按照目标URL格式修改如下：
如果使用React Router v5：

<Route path="/Your-Personal-profile/:id/:username" exact component={你的个人资料页组件} />

如果使用React Router v6（无需exact属性，默认精确匹配）：

<Route path="/Your-Personal-profile/:id/:username" element={<你的个人资料页组件 />} />

2. 修改Link跳转逻辑 #

调整to属性的拼接规则，同时传入用户ID和用户名，注意对用户名做URL编码，避免特殊字符、中文导致路由匹配失败：

<Link 
  to={`/Your-Personal-profile/${comment.UserId}/${encodeURIComponent(post.fullName)}`} 
  className="user_name_1"
>
  @{post.fullName}
</Link>

3. 个人资料页获取参数示例 #

在个人资料页组件内通过路由钩子拿到两个参数：

// 函数组件用useParams钩子
import { useParams } from 'react-router-dom';

function ProfilePage() {
  const { id, username } = useParams();
  // 如需展示用户名可做解码：const decodeUsername = decodeURIComponent(username)
  // 业务逻辑：优先用id查询用户信息即可
}

// 类组件可通过props.match.params获取
class ProfilePage extends React.Component {
  render() {
    const { id, username } = this.props.match.params;
  }
}

• 优先用URL中的id作为查询用户数据的唯一依据，username仅用于SEO优化、页面展示使用，不要用username作为查询条件，避免用户名重复、后续修改导致链接失效
• 可增加路由兼容逻辑：在个人资料页拿到id查询到数据库中存储的真实用户名后，和URL中的username做比对，如果不一致，调用路由的replace方法跳转到正确的/Your-Personal-profile/${id}/${真实用户名}地址，保证旧的仅带id的链接、用户名修改后的旧链接都可以正常访问，同时统一URL格式
• 如果需要兼容旧的仅带id的URL，可以额外加一条路由规则：<Route path="/Your-Personal-profile/:id" exact element={<ProfilePage />} />，命中该路由时自动补全用户名跳转即可
• 注意统一路由路径前缀，你当前代码中Route的前缀是/Your-Personal-profile，Link的前缀是/profile/fullName，和目标URL的前缀不一致，需要按实际需求统一修改

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