当前位置：首页 > React

react如何跳转

2026-02-11 14:01:34React

React 跳转的实现方式

在 React 中实现页面跳转可以通过多种方式，具体取决于使用的路由库或原生方法。以下是常见的几种实现方式：

使用 React Router 的 `Link` 组件

React Router 是 React 生态中最常用的路由库，Link 组件是其提供的导航工具。通过 to 属性指定目标路径，点击后会无刷新跳转。

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

function App() {
  return (
    <Link to="/target-path">跳转到目标页</Link>
  );
}

使用 `useNavigate` Hook

React Router v6 引入了 useNavigate Hook，适用于函数组件中编程式导航。通过调用 navigate 方法实现跳转。

react如何跳转

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

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

  const handleClick = () => {
    navigate('/target-path');
  };

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

使用 `history.push`（v5 及以下）

在 React Router v5 或更早版本中，可以通过 history 对象实现跳转。需通过 useHistory Hook 或高阶组件获取 history。

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

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

  const handleClick = () => {
    history.push('/target-path');
  };

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

原生 JavaScript 跳转

如果不依赖路由库，可以使用原生 window.location 或 window.location.href 实现页面跳转。这种方式会触发页面刷新。

react如何跳转

function App() {
  const handleClick = () => {
    window.location.href = '/target-path';
  };

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

动态路由跳转

跳转时支持传递参数，例如通过 URL 参数或状态。React Router 的 navigate 或 Link 均可实现。

// 通过 URL 参数
navigate('/user/123');

// 通过状态
navigate('/user', { state: { id: 123 } });

重定向组件

使用 <Navigate> 组件可以在渲染时直接触发跳转，适用于条件重定向场景。

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

function App() {
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

  return <div>Protected Content</div>;
}