react中如何做跳转

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

使用React Router的<Link>组件

React Router是React生态中最常用的路由库。通过<Link>组件可以实现声明式导航，无需刷新页面：

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

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

使用useNavigate钩子

React Router v6推荐使用useNavigate进行编程式导航：

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

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

  const handleClick = () => {
    navigate('/profile'); // 普通跳转
    navigate('/profile', { replace: true }); // 替换当前历史记录
    navigate(-1); // 返回上一页
  };

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

使用window.location

对于非React Router场景或需要完整页面刷新的跳转：

window.location.href = 'https://example.com'; // 完整跳转
window.location.replace('https://example.com'); // 替换当前历史记录

使用<a>标签

传统HTML方式的跳转，会导致页面刷新：

<a href="/about">About页面</a>

路由重定向

在路由配置中使用<Navigate>组件实现条件重定向：

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

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

路由参数传递

跳转时携带参数：

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

// 通过URL参数传递
navigate('/user/123');

选择方法时需考虑：

• 需要SPA体验时使用React Router方案
• 需要SEO或完整刷新时使用<a>标签或window.location
• 需要鉴权控制时使用条件重定向