react 如何跳转

路由跳转方法

在React中实现页面跳转通常依赖react-router-dom库（v5/v6）。以下是常见跳转方式：

编程式导航（useNavigate Hook）

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

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

  // 跳转到指定路径
  const handleClick = () => navigate('/target-path');

  // 带参数跳转
  const withParams = () => navigate('/user?id=123', { state: { from: 'home' } });

  // 返回上一页
  const goBack = () => navigate(-1);
}

声明式导航（Link组件）

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

<Link to="/about">关于页面</Link>
<Link to="/profile" state={{ user: data }}>带状态跳转</Link>

路由参数传递

// 跳转时传递参数
navigate('/user/123');

// 目标组件接收参数
import { useParams } from 'react-router-dom';
const { id } = useParams();

路由重定向

组件内重定向

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

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

路由配置重定向（v6）

const routes = [
  { path: '/', element: <Home /> },
  { path: '/old', element: <Navigate to="/new" replace /> }
];

注意事项

• 使用replace属性可避免历史记录堆叠
• 类组件需通过withRouter高阶组件或useNavigate封装实现导航
• 路径参数需在路由配置中定义匹配模式（如/user/:id）