React路由路径传id参数后组件渲染异常问题咨询

嘿，我来帮你排查这个问题～首先最可能的元凶是axios请求的相对路径问题，咱们一步步拆解：

核心问题：相对路径导致请求失败 #

当你访问/mail时，当前页面的URL根路径是http://localhost:3000/，浏览器会把axios.get("db.json")解析为请求http://localhost:3000/db.json——这个路径是正确的，所以能拿到数据并正常渲染。

但当你访问/mail/5时，当前页面的URL路径是http://localhost:3000/mail/，相对路径db.json会被自动解析为http://localhost:3000/mail/db.json，这个路径显然不存在，所以axios请求直接进入了catch分支，你的mails状态始终是初始值（空数组或undefined），自然就无法显示this.state.mails[0].name了。

快速解决方案：改用绝对路径请求资源 #

把axios的请求路径改成根路径开头的绝对路径，这样无论当前处于哪个路由下，都会请求正确的资源地址：

componentDidMount(){
  // 路径前加上斜杠，改为绝对路径
  axios.get("/db.json")
    .then( (response) => {
      console.log(response);
      this.setState({
        mails: response.data.mail,
        total: response.data.mail.length
      });
    })
    .catch(function (error) {
      console.log('error');
      console.log(error);
    });
}

额外优化建议（避免后续踩坑） #

1. 初始化组件state #

确保在Mail组件的constructor里初始化mails为空数组，避免render时因为this.state.mails为undefined而抛出错误：

constructor(props) {
  super(props);
  this.state = {
    activeItem: '',
    mails: [], // 初始化空数组，避免undefined报错
    total: 0
  };
}

2. 优化render的条件判断逻辑 #

你当前的判断this.state.mails.length > 0 && this.state.mails有点冗余，而且存在潜在报错风险。可以改用更安全的可选链写法：

{this.state.mails?.length > 0 ? this.state.mails[0].name : null}

可选链?.会在mails为null/undefined时直接返回undefined，避免触发TypeError。

3. 处理路由参数变化的场景 #

如果后续需要在不同id的邮件路由之间跳转（比如从/mail/5到/mail/6），React Router会复用同一个Mail组件，componentDidMount不会重新执行。这时可以通过componentDidUpdate监听参数变化，重新获取数据：

componentDidUpdate(prevProps) {
  // 当路由id参数变化时，重新请求数据
  if (prevProps.match.params.id !== this.props.match.params.id) {
    axios.get("/db.json")
      .then(response => {
        this.setState({
          mails: response.data.mail,
          total: response.data.mail.length
        });
      })
      .catch(error => {
        console.log('error', error);
      });
  }
}

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