React Router路由切换页面不更新，Class组件未获取最新id

核心原因 #

类组件在React Router中，URL参数变化时不会触发组件重新挂载，只会触发componentDidUpdate。如果没有正确获取更新后的路由参数，或者未在componentDidUpdate中对比参数变化并触发数据请求，就会出现页面内容不更新的问题。

解决方案 #

1. 确保类组件能获取到路由参数 #

根据React Router版本不同，处理方式有差异：

React Router v5及以下

使用withRouter高阶组件包裹类组件，它会将match、location、history注入到组件props中，通过props.match.params.id就能拿到当前URL的id参数。

React Router v6

v6移除了withRouter，可以自定义一个高阶组件（HOC）来注入路由参数：

import { useParams } from 'react-router-dom';

const withParams = (Component) => {
  return (props) => {
    const params = useParams();
    return <Component {...props} params={params} />;
  };
};

2. 在componentDidUpdate中对比参数并触发数据请求 #

不要依赖state中的id（如果未同步更新的话），直接从props中获取最新参数，对比前后参数变化后重新请求数据。同时在componentDidMount中初始化数据请求。

完整代码示例 #

React Router v5 示例

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';

class Services extends Component {
  state = {
    serviceData: null,
    isLoading: true
  };

  componentDidMount() {
    // 初始化加载数据
    const { id } = this.props.match.params;
    this.loadServiceData(id);
  }

  componentDidUpdate(prevProps) {
    const currentId = this.props.match.params.id;
    // 对比前后的id参数，变化则重新请求
    if (currentId !== prevProps.match.params.id) {
      this.loadServiceData(currentId);
    }
  }

  loadServiceData = async (id) => {
    this.setState({ isLoading: true });
    try {
      const res = await fetch(`/api/services/${id}`);
      const data = await res.json();
      this.setState({ serviceData: data, isLoading: false });
    } catch (err) {
      console.error('加载服务数据失败:', err);
      this.setState({ isLoading: false });
    }
  };

  render() {
    const { serviceData, isLoading } = this.state;
    if (isLoading) return <div>加载中...</div>;
    return (
      <div>
        <h2>服务详情 {this.props.match.params.id}</h2>
        <p>{serviceData?.content}</p>
      </div>
    );
  }
}

// 用withRouter包裹组件，注入路由props
export default withRouter(Services);

React Router v6 示例

import React, { Component } from 'react';
import { useParams } from 'react-router-dom';

// 自定义HOC注入路由参数
const withParams = (Component) => {
  return (props) => {
    const params = useParams();
    return <Component {...props} params={params} />;
  };
};

class Services extends Component {
  state = {
    serviceData: null,
    isLoading: true
  };

  componentDidMount() {
    const { id } = this.props.params;
    this.loadServiceData(id);
  }

  componentDidUpdate(prevProps) {
    const currentId = this.props.params.id;
    if (currentId !== prevProps.params.id) {
      this.loadServiceData(currentId);
    }
  }

  loadServiceData = async (id) => {
    this.setState({ isLoading: true });
    try {
      const res = await fetch(`/api/services/${id}`);
      const data = await res.json();
      this.setState({ serviceData: data, isLoading: false });
    } catch (err) {
      console.error('加载服务数据失败:', err);
      this.setState({ isLoading: false });
    }
  };

  render() {
    const { serviceData, isLoading } = this.state;
    if (isLoading) return <div>加载中...</div>;
    return (
      <div>
        <h2>服务详情 {this.props.params.id}</h2>
        <p>{serviceData?.content}</p>
      </div>
    );
  }
}

export default withParams(Services);

常见错误排查 #

• 未用withRouter（v5）或自定义HOC（v6）：导致组件props中没有路由参数，params.id为undefined；
• componentDidUpdate中对比state的id：state未随URL参数更新，导致无法触发请求；
• 未在componentDidMount中初始化请求：首次加载也不会显示数据。

内容的提问来源于stack exchange，提问作者Дима Смирнов