React Router手动修改URL后页面导航异常问题咨询

看起来你遇到的是React Router中相对路径跳转导致的路径拼接错误问题，我来帮你分析下原因和解决办法：

问题根源 #

你代码里的history.push使用了相对路径（路径开头没有/），React Router解析相对路径时，会基于当前页面的URL来拼接：

• 当当前URL是localhost:3000/Athletes/（结尾带斜杠），此时相对路径"Athletes/" + ...会被解析为/Athletes/Athletes/2/AthleteSessions/——带斜杠的URL会被认为是一个"目录"，相对路径会直接追加到这个目录下。
• 当你在localhost:3000/Athletes/2/AthleteSessions（不带斜杠）页面时，相对路径athSess.AthleteSessionId + "/TrainingSession/"会替换当前URL的最后一段，变成/Athletes/2/1/TrainingSession/，而非正确的层级路径。

解决方案：改用绝对路径或基于match.url构建路径 #

有两种可靠的方式来修复这个问题：

方式1：直接使用绝对路径（路径以/开头）

修改跳转代码，让pathname始终从根路径开始，彻底避免相对路径的解析歧义：

Athletes.js：

onClick={() => {
  this.props.history.push({
    pathname: `/Athletes/${ath.AthleteId}/AthleteSessions/`,
  });
}}

AthleteSessions.js：

const passedAthleteId = this.props.match.params.id;
onClick={() => {
  this.props.history.push({
    pathname: `/Athletes/${passedAthleteId}/AthleteSessions/${athSess.AthleteSessionId}/TrainingSession/`,
  });
}}

方式2：用match.url动态构建路径（更灵活）

this.props.match.url会返回当前组件匹配的绝对路径，用它来拼接后续路径，能避免硬编码路由路径，后期路由规则修改时更易维护：

Athletes.js：

onClick={() => {
  this.props.history.push({
    pathname: `${this.props.match.url}/${ath.AthleteId}/AthleteSessions/`,
  });
}}

AthleteSessions.js：

onClick={() => {
  this.props.history.push({
    pathname: `${this.props.match.url}/${athSess.AthleteSessionId}/TrainingSession/`,
  });
}}

验证效果 #

修改后，不管你手动修改URL时是否带斜杠，点击按钮跳转都会生成正确的绝对路径，不会再出现重复路径或层级缺失的问题。

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