如何在useNavigate跳转后强制useEffect执行及组件初始渲染？

方法1：监听路由变化触发数据刷新 #

借助react-router-dom的useLocation钩子，监听路由路径的变化，只要路由发生切换（包括从/delete跳回/），就重新执行数据获取逻辑。

修改App.js代码：

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

function App() {
  const [contacts, setContacts] = useState([]);
  const location = useLocation();

  useEffect(() => {
    const fetchContacts = async () => {
      const res = await fetch('/api/contacts');
      const data = await res.json();
      setContacts(data);
    };
    fetchContacts();
  }, [location]); // 将location加入依赖数组，路由变化时触发effect

  return (
    {/* 联系人列表渲染逻辑 */}
  );
}

export default App;

方法2：状态提升到路由上层组件 #

把联系人数据的状态和更新逻辑，提升到包裹所有路由的父组件中，删除操作完成后，通过回调通知父组件刷新数据，再跳转回首页。

父组件（RouterWrapper.js）示例： #

import { useState, useEffect } from 'react';
import { Routes, Route } from 'react-router-dom';
import App from './App';
import Delete from './Delete';

function RouterWrapper() {
  const [contacts, setContacts] = useState([]);

  const fetchContacts = async () => {
    const res = await fetch('/api/contacts');
    const data = await res.json();
    setContacts(data);
  };

  useEffect(() => {
    fetchContacts();
  }, []);

  // 删除成功后触发的刷新回调
  const handleDeleteFinish = () => {
    fetchContacts();
  };

  return (
    <Routes>
      <Route path="/" element={<App contacts={contacts} />} />
      <Route path="/delete" element={<Delete onDeleteFinish={handleDeleteFinish} />} />
    </Routes>
  );
}

export default RouterWrapper;

Delete.js组件修改： #

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

function Delete({ onDeleteFinish }) {
  const navigate = useNavigate();

  const handleDelete = async () => {
    // 执行删除请求
    await fetch('/api/contacts/目标ID', { method: 'DELETE' });
    // 通知父组件刷新数据
    onDeleteFinish();
    // 跳转回首页
    navigate('/');
  };

  return (
    <button onClick={handleDelete}>删除联系人</button>
  );
}

export default Delete;

方法3：用React Context管理全局状态 #

如果项目组件层级复杂，可通过Context将联系人数据和操作方法全局共享，删除操作直接更新Context中的本地状态，首页自动同步最新数据，无需重新请求。

定义Context（ContactContext.js）： #

import { createContext, useContext, useState, useEffect } from 'react';

const ContactContext = createContext();

export function ContactProvider({ children }) {
  const [contacts, setContacts] = useState([]);

  const fetchContacts = async () => {
    const res = await fetch('/api/contacts');
    const data = await res.json();
    setContacts(data);
  };

  useEffect(() => {
    fetchContacts();
  }, []);

  // 封装删除方法，删除后直接更新本地状态
  const deleteContact = async (id) => {
    await fetch(`/api/contacts/${id}`, { method: 'DELETE' });
    setContacts(prev => prev.filter(item => item.id !== id));
  };

  return (
    <ContactContext.Provider value={{ contacts, deleteContact }}>
      {children}
    </ContactContext.Provider>
  );
}

export function useContact() {
  return useContext(ContactContext);
}

Delete.js组件使用Context： #

import { useNavigate } from 'react-router-dom';
import { useContact } from './ContactContext';

function Delete() {
  const navigate = useNavigate();
  const { deleteContact } = useContact();

  const handleDelete = async () => {
    await deleteContact(目标ID);
    navigate('/');
  };

  return (
    <button onClick={handleDelete}>删除联系人</button>
  );
}

export default Delete;

首页App.js直接读取Context数据： #

import { useContact } from './ContactContext';

function App() {
  const { contacts } = useContact();

  return (
    {/* 渲染联系人列表 */}
  );
}

export default App;

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