React Router同路由跳转时如何重置Test组件预填数据状态？

Got it, let's break down how to solve this problem. The root cause here is that React Router doesn't unmount and remount your Test component when you navigate to the exact same /test route. That means your initial data prefill logic in componentDidMount only runs once, leaving old state and Redux data hanging around instead of being reset.

Here are a few practical solutions tailored to your setup:

1. Force Component Remount with a Unique key #

The simplest fix is to make React treat each navigation to /test as a fresh instance of the Test component by adding a unique key prop. We can use the location.key (React Router generates a unique key for each navigation) to trigger a full unmount/remount cycle.

Update your Route configuration like this:

<Route 
  path="/test" 
  render={(props) => <Test key={props.location.key} {...props} />} 
/>

Now every time you navigate to /test, the Test component will fully remount. This means componentDidMount will run again, pulling fresh prefill data from Redux, updating local state, and clearing the Redux prefill data—just like your original logic intended.

2. Listen for Route Changes in componentDidUpdate #

If you don't want to remount the component (maybe it has expensive setup logic), you can check for route updates in the componentDidUpdate lifecycle hook. This works if you're navigating to /test from another route, or if you pass a reset flag in the route state.

Option A: Detect navigation from other routes #

Add this to your Test component:

componentDidUpdate(prevProps) {
  // Check if we just navigated to /test from a different route
  if (this.props.location.pathname === '/test' && prevProps.location.pathname !== '/test') {
    // Reset local state first
    this.setState({ formData: {} });
    
    // Pull fresh prefill data from Redux
    const prefillData = this.props.prefillData;
    this.setState({ formData: prefillData });
    
    // Clear Redux prefill data
    this.props.clearPrefillData();
  }
}

Option B: Trigger reset with route state #

If you're navigating to /test from the same route (e.g., clicking a button that links to /test), pass a reset flag in the route state:

// When navigating (e.g., in a button click handler)
this.props.history.push('/test', { reset: true });

Then handle it in componentDidUpdate:

componentDidUpdate(prevProps) {
  const shouldReset = this.props.location.state?.reset && !prevProps.location.state?.reset;
  
  if (shouldReset) {
    // Run your reset/prefill logic
    this.setState({ formData: {} });
    const prefillData = this.props.prefillData;
    this.setState({ formData: prefillData });
    this.props.clearPrefillData();
    
    // Clear the reset flag so it doesn't trigger on next update
    this.props.history.replace('/test', {});
  }
}

3. Sync Redux State Changes to Component Local State #

Another approach is to make your component react to changes in the Redux prefill data, even if the component doesn't remount. Update your Test component to listen for Redux state updates:

componentDidMount() {
  this.handlePrefill();
}

componentDidUpdate(prevProps) {
  // If Redux prefill data changes, re-run prefill logic
  if (prevProps.prefillData !== this.props.prefillData) {
    this.handlePrefill();
  }
}

handlePrefill() {
  const prefillData = this.props.prefillData;
  if (prefillData) {
    // Update local state with fresh prefill data
    this.setState({ formData: prefillData });
    // Clear Redux prefill data immediately
    this.props.clearPrefillData();
  }
}

Then, when navigating to /test, first clear the old Redux prefill data and set new data before navigating:

// Example action creator for navigation
const goToTestWithPrefill = (newPrefillData) => (dispatch) => {
  // Clear old data first
  dispatch(clearPrefillData());
  // Set new prefill data
  dispatch(setPrefillData(newPrefillData));
  // Navigate to /test
  history.push('/test');
};

This ensures that even if the component is already mounted, it'll pick up the new prefill data and reset its local state.

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