从子路由返回父路由时Products组件useEffect未触发问题

问题原因 #

你用的是React Router嵌套路由，父组件Products在子路由Product切换时不会卸载，如果你的useEffect依赖是空数组[]，只会在组件首次挂载时执行一次，返回时不会重新触发，导致更新后的产品数据无法同步显示。

解决方案 #

方法1：监听路由路径变化 #

通过useLocation钩子监听路由pathname的变化，当返回/products时重新拉取数据：

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

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

  useEffect(() => {
    // 这里写获取所有产品数据的逻辑
    const fetchProducts = async () => {
      const res = await fetch('/api/products');
      const data = await res.json();
      // 更新组件状态
      // setProducts(data);
    };
    fetchProducts();
  }, [location.pathname]); // 依赖添加location.pathname

  // 组件渲染逻辑...
}

当从/products/:productId返回/products时，location.pathname发生变化，会触发useEffect重新执行，拉取最新数据。

方法2：编辑完成后主动通知父组件刷新 #

在Product组件编辑完成后，通过路由状态传递刷新标记，让Products组件检测到后重新拉取数据：

在Product组件中：

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

function Product() {
  const navigate = useNavigate();

  const handleSaveEdit = async () => {
    // 执行产品编辑请求
    await fetch(`/api/products/${productId}`, {
      method: 'PUT',
      body: JSON.stringify(updatedProduct),
      headers: { 'Content-Type': 'application/json' }
    });
    // 跳转时带上需要刷新的标记
    navigate('/products', { state: { needRefresh: true } });
  };

  // 组件渲染逻辑...
}

在Products组件中：

import { useLocation, useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';

function Products() {
  const location = useLocation();
  const navigate = useNavigate();
  const [products, setProducts] = useState([]);

  const fetchProducts = async () => {
    const res = await fetch('/api/products');
    const data = await res.json();
    setProducts(data);
  };

  // 初始加载数据
  useEffect(() => {
    fetchProducts();
  }, []);

  // 监听路由状态，判断是否需要刷新
  useEffect(() => {
    if (location.state?.needRefresh) {
      fetchProducts();
      // 清除路由状态，避免下次进入时重复触发
      navigate('/products', { replace: true, state: {} });
    }
  }, [location.state, navigate]);

  // 组件渲染逻辑...
}

方法3：使用useNavigationType判断返回操作 #

React Router v6.4+提供了useNavigationType钩子，可以判断路由跳转类型（比如POP就是浏览器返回操作）：

import { useLocation, useNavigationType } from 'react-router-dom';
import { useEffect } from 'react';

function Products() {
  const location = useLocation();
  const navigationType = useNavigationType();

  useEffect(() => {
    // 如果是返回操作且当前路径是/products，刷新数据
    if (navigationType === 'POP' && location.pathname === '/products') {
      fetchProducts();
    }
  }, [location.pathname, navigationType]);

  // 初始加载
  useEffect(() => {
    fetchProducts();
  }, []);

  // 组件渲染逻辑...
}

总结 #

最常用的是方法1，简单直接，适合大多数场景；如果需要更精准控制刷新时机，可以用方法2或方法3。

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