当前位置：首页 > React

react 如何再次调用路由

2026-03-11 02:03:43React

在 React 中重新调用路由的方法

React 中重新调用路由通常涉及路由跳转或重新加载当前路由。以下是几种常见的方法：

使用 `react-router-dom` 的 `useNavigate` 钩子

useNavigate 是 react-router-dom v6 中提供的钩子，用于编程式导航。可以通过调用 navigate 函数重新跳转到当前路由或目标路由。

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

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

  const reloadRoute = () => {
    // 重新加载当前路由
    navigate(0); // 参数 0 表示刷新当前页面
  };

  const redirectToSameRoute = () => {
    // 跳转到相同的路由（无刷新）
    navigate('/current-route-path', { replace: true });
  };

  return (
    <button onClick={reloadRoute}>重新加载路由</button>
  );
}

使用 `window.location.reload`

如果需要强制刷新整个页面（包括所有状态和资源），可以直接调用浏览器原生的 reload 方法。

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

// 在组件中使用
<button onClick={reloadPage}>刷新页面</button>

使用 `useHistory`（v5 及以下版本）

在 react-router-dom v5 及以下版本中，可以使用 useHistory 钩子实现类似功能。

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

function MyComponent() {
  const history = useHistory();

  const reloadRoute = () => {
    history.push('/current-route-path');
  };

  return (
    <button onClick={reloadRoute}>重新加载路由</button>
  );
}

通过动态路由参数触发更新

如果路由包含动态参数（如 :id），可以通过修改参数触发路由重新渲染。

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

function MyComponent() {
  const { id } = useParams();
  const navigate = useNavigate();

  const reloadWithNewParam = () => {
    navigate(`/route/${Date.now()}`); // 使用新参数重新导航
  };

  return (
    <button onClick={reloadWithNewParam}>通过参数更新路由</button>
  );
}

使用 `useEffect` 监听路由变化

通过 useEffect 监听路由变化，可以在路由更新时执行特定逻辑。

react 如何再次调用路由

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

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

  useEffect(() => {
    // 路由变化时执行的操作
    console.log('路由已更新', location.pathname);
  }, [location]);

  return <div>当前路由: {location.pathname}</div>;
}