当前位置：首页 > React

react如何重新加载

2026-01-14 10:22:54React

重新加载当前页面

在React中重新加载当前页面可以通过window.location.reload()方法实现。该方法会强制浏览器重新加载当前URL，类似于按下F5刷新页面。

const reloadPage = () => {
  window.location.reload();
};

使用React Router进行导航刷新

如果项目使用了React Router，可以通过useNavigate钩子实现类似重新加载的效果。先导航到一个空路径再返回原路径。

react如何重新加载

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

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

  const handleReload = () => {
    navigate('/blank', { replace: true });
    setTimeout(() => navigate(-1), 100);
  };

  return <button onClick={handleReload}>重新加载</button>;
}

强制组件重新渲染

需要仅重新渲染某个组件而不刷新整个页面时，可以通过改变state值强制React更新组件。

react如何重新加载

const [reloadKey, setReloadKey] = useState(0);

const reloadComponent = () => {
  setReloadKey(prevKey => prevKey + 1);
};

return <ChildComponent key={reloadKey} />;

使用useReducer重置状态

对于复杂的状态管理，使用useReducer可以更方便地重置组件状态到初始值。

const initialState = { /* 初始状态 */ };
const [state, dispatch] = useReducer(reducer, initialState);

const resetState = () => {
  dispatch({ type: 'RESET' });
};

数据重新获取

从API重新获取数据时，可以在请求函数中添加时间戳参数确保获取最新数据。

const [data, setData] = useState(null);
const fetchData = () => {
  fetch(`/api/data?t=${Date.now()}`)
    .then(res => res.json())
    .then(setData);
};