如何react页面跳转

React 页面跳转方法

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

使用 React Router 的 Link 组件

React Router 提供了 Link 组件，用于在应用内导航而不刷新页面。

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

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

使用 React Router 的 useNavigate 钩子

对于编程式导航，可以使用 useNavigate 钩子。

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

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

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

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

使用 window.location

如果需要完全刷新页面或跳转到外部 URL，可以直接操作 window.location。

function App() {
  const handleClick = () => {
    window.location.href = 'https://example.com';
  };

  return (
    <button onClick={handleClick}>跳转到外部网站</button>
  );
}

使用 history.push（旧版 React Router）

在 React Router v5 及更早版本中，可以使用 history.push 方法。

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

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

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

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

注意事项

• 使用 React Router 时，确保路由已正确配置。
• 对于外部链接，建议使用 window.location 或 <a> 标签。
• 编程式导航适合在事件处理函数中触发跳转。