当前位置：首页 > React

react如何跳转路由

2026-03-31 00:51:05React

React 路由跳转方法

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

使用 `Link` 组件

Link 是 react-router-dom 提供的组件，用于声明式导航。它会在不刷新页面的情况下更新 URL 和渲染匹配的组件。

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');
  };

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

使用 `history.push`（适用于 React Router v5）

在 React Router v5 中，可以通过 history 对象进行路由跳转。

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

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

  const handleClick = () => {
    history.push('/about');
  };

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

带参数跳转

路由跳转时可以传递参数，例如状态、查询参数或动态路由参数。

// 使用 useNavigate 传递状态
navigate('/about', { state: { userId: 123 } });

// 使用 Link 传递状态
<Link to="/about" state={{ userId: 123 }}>跳转</Link>

// 动态路由参数
navigate('/user/123');

重定向

使用 Navigate 组件可以实现重定向功能。

react如何跳转路由

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

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