当前位置：首页 > React

react如何内部跳转界面

2026-03-11 07:05:05React

React 内部跳转界面的方法

React 中实现内部页面跳转通常通过路由库完成，最常用的是 react-router-dom。以下是几种常见的实现方式：

使用 `<Link>` 组件

react-router-dom 提供了 <Link> 组件用于声明式导航，类似于 HTML 的 <a> 标签，但不会触发页面刷新。

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

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

使用 `useNavigate` Hook

在函数组件中，可以通过 useNavigate Hook 实现编程式导航，适合在事件处理函数中触发跳转。

react如何内部跳转界面

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

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

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

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

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

在 react-router-dom v5 及以下版本中，可以通过 history 对象实现跳转。

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

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

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

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

路由传参

跳转时可以传递参数，通过 state 或 URL 参数实现。

react如何内部跳转界面

// 使用 state 传参
navigate('/target-path', { state: { id: 1 } });

// 使用 URL 参数传参
navigate('/target-path/123');

动态路由匹配

在路由配置中定义动态参数，通过 useParams 获取。

// 路由配置
<Route path="/target-path/:id" element={<TargetPage />} />

// 目标页面获取参数
import { useParams } from 'react-router-dom';

function TargetPage() {
  const { id } = useParams();
  return <div>ID: {id}</div>;
}

重定向

使用 <Navigate> 组件实现条件重定向。

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

function ProtectedPage() {
  const isAuthenticated = false;

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

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