React路由切换时Table组件不重新渲染问题求助

问题描述 #

使用react@18.2.0 + react-router@6.8.1开发兽医CRUDL应用时，首次点击导航栏的pets/owners路径能正确展示对应实体的表格数据，但切换路由时，表格仍保留首次加载的实体数据，必须刷新页面才能显示新路径的内容。其中Page是复用组件，根据传入的entity属性渲染对应表格。

原因分析 #

1. 组件复用导致生命周期未触发：React Router在切换同类型组件的路由时（比如两个路由都渲染Page组件），会复用已存在的组件实例，不会重新执行componentDidMount。首次加载时componentDidMount会调用数据获取方法，但路由切换时该方法不会再次执行，导致数据未更新。
2. 未监听props变化：Page组件的entity属性随路由切换而变化，但组件没有监听这个props的变化，因此不会触发数据重新获取。

解决方案 #

1. 添加componentDidUpdate监听props变化 #

在Page类组件中添加componentDidUpdate生命周期方法，当entity props发生变化时，重新调用对应的数据获取逻辑：

class Page extends Component {
  // ... 其他已有代码

  componentDidMount() {
    const { entity } = this.props;
    if (entity === "owners") {
      this.getBackendOptions({});
      return;
    }
    this.showEntity();
  };

  // 新增：监听entity props变化并重新加载数据
  componentDidUpdate(prevProps) {
    if (prevProps.entity !== this.props.entity) {
      // 重置状态避免旧数据残留
      this.setState({
        entities: [],
        columns: [],
        search: '',
        vet: "",
        pet: ""
      }, () => {
        const { entity } = this.props;
        if (entity === "owners") {
          this.getBackendOptions({});
        } else {
          this.showEntity();
        }
      });
    }
  }

  // ... 其他已有代码
}

2. 优化Table组件的key值（可选但推荐） #

当前Table组件中TableRow的key使用row-${index}，当数据替换时，index可能重复导致React无法正确识别元素变化。建议改用实体的唯一ID作为key：

// Table.js中修改map的key
{entities.map((entity) => (
  <TableRow
    key={`row-${entity.id}`} // 用entity.id替代index
    index={entity.id ? entity.id : false} 
    entity={entity} 
    editEntity={editEntity} 
    deleteEntity={deleteEntity}
    columns={columns}
  />
))}

3. 可选：给Route添加唯一key强制组件重新挂载 #

如果不想使用componentDidUpdate，可以给每个Route组件添加唯一的key属性，强制React在路由切换时重新创建Page组件实例，触发componentDidMount：

// App.js路由配置
const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<RootLayout />}>
      <Route
        key="pets-route" // 设置唯一key
        path="pets"
        element={<Page title="Pets" entity="pets" />}
      />
      <Route
        key="owners-route" // 设置唯一key
        path="owners"
        element={<Page title="Owners" entity="owners" />}
      />
    </Route>
  )
)

说明 #

第一种方案（componentDidUpdate）是更优的做法，避免了组件重复挂载带来的性能开销；第三种方案虽然简单，但会导致组件完全重新初始化，适合场景简单的情况。

内容的提问来源于stack exchange，提问作者Alex S.