当前位置：首页 > React

react如何路由跳转

2026-02-11 21:25:52React

React 路由跳转方法

在 React 中实现路由跳转通常使用 react-router-dom 库。以下是几种常见的路由跳转方式：

使用 `Link` 组件

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

react如何路由跳转

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

function App() {
  return (
    <Link to="/about">跳转到 About 页面</Link>
  );
}

使用 `useNavigate` Hook

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

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

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

  const handleClick = () => {
    navigate('/about'); // 跳转到指定路径
    navigate(-1); // 返回上一页
    navigate('/about', { replace: true }); // 替换当前历史记录
  };

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

使用 `history` 对象（v5 及以下版本）

在 react-router-dom v5 及更早版本中，可通过 history 对象跳转：

react如何路由跳转

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

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

  const handleClick = () => {
    history.push('/about'); // 跳转并保留历史记录
    history.replace('/about'); // 替换当前历史记录
  };

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

路由传参

跳转时可通过 URL 参数、状态或查询字符串传递数据：

// URL 参数（需在路由配置中定义动态参数）
navigate('/user/123');

// 状态传递
navigate('/about', { state: { id: 1 } });

// 查询字符串
navigate('/about?name=John');

重定向

使用 Navigate 组件实现条件重定向：

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

function ProtectedRoute({ isLoggedIn }) {
  return isLoggedIn ? <Dashboard /> : <Navigate to="/login" />;
}