react 如何跳转页面跳转

React 页面跳转方法

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

使用 React Router 的 Link 组件

React Router 提供了 Link 组件，用于在应用内进行导航而不刷新页面。适用于声明式导航。

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

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

使用 React Router 的 useNavigate Hook

React Router v6 引入了 useNavigate Hook，适用于编程式导航（例如在事件处理函数中跳转）。

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

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

  const handleClick = () => {
    navigate('/target-path');
    // 可传递状态或参数
    navigate('/target-path', { state: { id: 1 } });
  };

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

使用 React Router 的 history（v5 及以下）

在 React Router v5 或更低版本中，可以通过 history 对象实现跳转。

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

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

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

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

原生 JavaScript 跳转

如果不使用路由库，可以通过原生方法实现页面跳转，但会导致页面刷新。

window.location.href = '/target-path';
// 或
window.location.replace('/target-path'); // 替换当前历史记录

路由参数传递

跳转时可以通过 URL 参数或状态传递数据。

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

// 查询参数
navigate('/user?id=123');

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

外部链接跳转

对于跳转到外部链接，建议使用原生方法或 a 标签。

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  跳转到外部链接
</a>

动态路由跳转

在动态路由中，可以通过模板字符串或参数对象构造路径。

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

// 或使用对象形式
navigate({
  pathname: '/user',
  search: '?id=123',
});

根据项目需求选择合适的方法，React Router 提供的导航方式更适合单页应用（SPA），而原生方法适用于传统多页应用。