React中移除queryParam后组件未重置为默认状态，如何解决？

核心问题是同一个组件实例被复用：当你从requests/request?id=1（详情页）返回requests/request（创建页）时，路由仅query参数变化，框架不会销毁重建组件，所以组件内的状态、表单数据等会保留之前的内容；而从其他页面跳转过来时，组件是全新实例，自然加载默认状态。

以下是几种直接可行的处理方式：

1. 监听路由变化，手动重置状态 #

在组件内监听路由的query参数变化，当检测到query中没有id时，触发状态重置逻辑。
Vue示例：

watch: {
  '$route.query': {
    handler(newQuery) {
      if (!newQuery.id) {
        // 调用重置表单/状态的方法
        this.resetForm()
      }
    },
    immediate: true // 页面初始化时也执行一次
  }
}

React示例：

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

function RequestComponent() {
  const location = useLocation();

  useEffect(() => {
    const searchParams = new URLSearchParams(location.search);
    if (!searchParams.get('id')) {
      // 重置表单状态
      resetFormState();
    }
  }, [location.search]);

  // ...组件逻辑
}

2. 给路由组件加唯一key，强制刷新实例 #

在路由渲染的地方，给组件加上基于路由完整路径（含query）的key，这样query变化时，key改变，组件会被销毁重建，自然回到默认状态。
Vue示例：

<router-view :key="$route.fullPath"></router-view>

React示例：

<Routes>
  <Route 
    path="/requests/request" 
    element={<RequestComponent key={window.location.href} />} 
  />
</Routes>

3. 利用路由守卫重置状态 #

在组件内的路由守卫中，判断目标路由是否为创建页，若是则执行状态重置。
Vue组件内守卫示例：

beforeRouteUpdate(to, from, next) {
  if (!to.query.id) {
    this.resetForm();
  }
  next();
}

4. 拆分组件逻辑（可选） #

如果创建页和详情页的逻辑差异较大，可以把公共部分抽成父组件，创建页和详情页作为两个子组件分开实现，路由分别指向不同子组件，彻底避免复用问题。

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