当前位置：首页 > React

react怎么实现跳转

2026-01-27 02:24:55React

React 实现跳转的方法

在 React 中实现页面跳转可以通过多种方式完成，以下是几种常见的方法：

使用 `react-router-dom` 的 `Link` 组件

react-router-dom 是 React 生态中最常用的路由库，通过 Link 组件可以实现声明式导航。

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

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

使用 `react-router-dom` 的 `useNavigate` Hook

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

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

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

  const handleClick = () => {
    navigate("/target-page");
  };

  return (
    <button onClick={handleClick}>跳转到目标页</button>
  );
}

使用 `window.location` 进行原生跳转

如果项目未使用 react-router-dom，可以直接通过原生 JavaScript 的 window.location 实现跳转。

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

  return (
    <button onClick={handleClick}>跳转到目标页</button>
  );
}

使用 `Navigate` 组件进行重定向

在特定条件下（如登录状态检查），可以通过 Navigate 组件实现自动跳转。

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

function App() {
  const isLoggedIn = false;

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

  return <div>欢迎页面</div>;
}

传递参数跳转

跳转时可以携带参数，例如通过 URL 参数或状态传递。

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

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

  const handleClick = () => {
    navigate("/target-page", { state: { id: 1 } });
  };

  return (
    <button onClick={handleClick}>跳转到目标页（带参数）</button>
  );
}

动态路由跳转

如果目标页面是动态路由（如 /user/:id），可以通过模板字符串拼接路径。

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

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

  const handleClick = () => {
    navigate(`/user/${userId}`);
  };

  return (
    <button onClick={handleClick}>跳转到用户页</button>
  );
}

以上方法覆盖了 React 中常见的跳转场景，根据项目需求选择合适的方式即可。

react怎么实现跳转