当前位置：首页 > React

react 如何再次调用路由

2026-01-24 17:23:04React

在 React 中再次调用路由

React 中可以通过 react-router-dom 提供的 API 来实现路由的再次调用或导航。以下是几种常见方法：

使用 `useNavigate` Hook

在函数组件中，可以通过 useNavigate Hook 实现编程式导航：

react 如何再次调用路由

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

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

  const handleClick = () => {
    // 跳转到指定路径
    navigate('/target-path');
    // 或带状态跳转
    navigate('/target-path', { state: { key: 'value' } });
  };

  return <button onClick={handleClick}>跳转</button>;
}

使用 `useHistory` (v5 及以下版本)

如果是 react-router-dom v5 或更早版本，可以通过 useHistory：

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

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

  const handleClick = () => {
    history.push('/target-path');
    // 或替换当前路由
    history.replace('/target-path');
  };

  return <button onClick={handleClick}>跳转</button>;
}

通过 `<Link>` 或 `<NavLink>` 组件

声明式导航可以直接使用内置组件：

react 如何再次调用路由

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

function MyComponent() {
  return (
    <Link to="/target-path">跳转</Link>
    // 或带参数
    <Link to={{ pathname: '/target-path', state: { key: 'value' } }}>跳转</Link>
  );
}

强制刷新当前路由

如果需要重新加载当前路由（包括重新执行数据获取），可以通过组合 useNavigate 和 useLocation 实现：

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

function RefreshCurrentRoute() {
  const navigate = useNavigate();
  const location = useLocation();

  const reload = () => {
    navigate(location.pathname, { replace: true });
    window.location.reload(); // 可选：完全刷新页面
  };

  return <button onClick={reload}>刷新当前页</button>;
}

路由重定向

在组件渲染逻辑中可以通过 <Navigate> 组件实现条件重定向：

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

function ProtectedRoute({ isAuth }) {
  if (!isAuth) {
    return <Navigate to="/login" replace />;
  }
  return <div>Protected Content</div>;
}