ReactJS中带参数URL的Link跳转失效问题求助

Great question! Let’s break down what’s going on here and how to fix it—this is a common gotcha with React Router’s component reuse behavior, not an issue with similar URL structures.

Why This Happens #

When you navigate from /site/1 to /site/2, React Router doesn’t unmount and remount your SitesView component. Instead, it reuses the existing component instance because the route path (/site/:id) still matches.

If your SitesView only loads data or initializes state based on the id prop once (like in componentDidMount for class components, or on the first render for function components), it won’t pick up the new id when the URL changes. That’s why the address bar updates but the page content stays the same.

Solutions to Fix It #

1. Handle Param Updates in Class Components

If you’re using a class-based SitesView, add a componentDidUpdate lifecycle method to check when the id prop changes, then re-fetch your data:

class SitesView extends React.Component {
  componentDidMount() {
    this.loadSiteData(this.props.id);
  }

  componentDidUpdate(prevProps) {
    // Trigger data load only when the id prop changes
    if (prevProps.id !== this.props.id) {
      this.loadSiteData(this.props.id);
    }
  }

  loadSiteData = (siteId) => {
    // Replace with your actual data fetching logic (e.g., Redux dispatch)
    this.props.fetchSiteDetails(siteId);
  }

  // ... rest of your component rendering logic
}

2. Use React Router Hooks for Function Components

If you’re using a function component, leverage useParams to get the dynamic id and useEffect to listen for changes to that id:

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

const SitesView = ({ fetchSiteDetails }) => {
  const { id } = useParams();

  // Runs whenever the id param changes
  useEffect(() => {
    fetchSiteDetails(id);
  }, [id, fetchSiteDetails]); // Include dependencies to avoid stale closures

  // ... rest of your component rendering logic
};

3. Check for Pure Component Blockers

If your SitesView is wrapped with React.memo (a pure component optimization), make sure it’s configured to re-render when the id prop changes. By default, React.memo does a shallow comparison, but you can customize it if needed:

const SitesView = React.memo(({ id, fetchSiteDetails }) => {
  // ... component logic
}, (prevProps, nextProps) => {
  // Return false to force re-render when id changes
  return prevProps.id === nextProps.id;
});

Quick Note on Your Route Setup #

Your existing route configuration looks fine—passing id={props.match.params.id} via the render prop correctly forwards the updated param to SitesView. The { pure: false } setting on your connected App component also ensures it doesn’t block re-renders when route props change, so that’s not the culprit here.

To recap: The issue boils down to React Router reusing your component instead of remounting it. You just need to explicitly handle the id parameter change in your SitesView component to trigger new data loading and state updates.

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