嵌套路由中使用history.push跳转后页面未重新渲染问题求助

嘿，我完全懂你遇到的这个头疼问题——在模态框里删完数据，跳回父路由后分类列表还留着已删除的条目，非得刷新页面才消失。本质原因是React组件只有在props或state发生变化时才会重新渲染，而你的CategoryList大概率只在首次挂载时拉取了数据，从子路由返回时并没有触发数据的重新获取。

下面给你几个实用的解决方案，按推荐度排序：

1. 监听路由变化，主动重新拉取数据 #

在CategoryList类组件里，用componentDidUpdate钩子监听路由location的变化。当从子路由返回时，location会发生改变，这时我们就重新调用获取分类列表的方法：

import { withRouter } from 'react-router-dom'; // 需要用withRouter包裹组件，拿到location props

class CategoryList extends Component {
  componentDidMount() {
    this.fetchCategories(); // 首次挂载时加载数据
  }

  componentDidUpdate(prevProps) {
    // 对比前后路由的location，变化了就重新拉取数据
    if (this.props.location !== prevProps.location) {
      this.fetchCategories();
    }
  }

  fetchCategories = async () => {
    // 你的数据获取逻辑，比如API请求
    const res = await fetch('/api/categories');
    const data = await res.json();
    this.setState({ categories: data });
  }

  // 其他组件代码...
}

export default withRouter(CategoryList);

这个方案不用改路由配置，直接在组件内部处理，逻辑清晰，是最常用的解决方式。

2. 给路由组件加唯一key，强制重新挂载 #

如果你的父路由是用Route组件渲染的，可以给CategoryList加一个基于location的key属性。每次路由变化时，key会更新，React会认为这是一个新组件，从而触发重新挂载，自动执行componentDidMount重新拉取数据：

// 在路由配置的地方
<Route 
  path="/categories" 
  component={(props) => <CategoryList key={props.location.key} {...props} />} 
/>

location.key是React Router自动生成的唯一标识，每次跳转都会变化，能确保组件每次都重新挂载。这个方案更简单，适合逻辑不复杂的场景。

3. 用状态管理同步数据（适合复杂应用） #

如果你的项目用了Redux、MobX这类状态管理库，可以把分类列表存在全局状态里。子组件删除数据后，直接更新全局状态的分类列表，父组件因为订阅了全局状态，会自动重新渲染，根本不用处理路由跳转后的刷新问题：

// 子组件里的删除逻辑
const handleDelete = async (id) => {
  await fetch(`/api/categories/${id}`, { method: 'DELETE' });
  // 更新全局状态，比如dispatch一个action
  dispatch(removeCategory(id));
  // 跳回父路由
  this.props.history.push('/categories');
}

这种方案从根源上解决了数据同步问题，适合中大型应用，能避免组件间的耦合。

为什么原来的方式不生效？ #

你用history.push跳回父路由时，CategoryList其实已经挂载在DOM里了，React不会重复执行componentDidMount，所以旧数据不会更新。只有当组件的props（比如路由location）或state变化时，才会触发重新渲染——这也是上面几个方案的核心思路。

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