react如何跳转路由

React 路由跳转方法

在 React 中实现路由跳转可以通过 react-router-dom 库提供的多种方式完成。以下是常见的几种方法：

使用 Link 组件

Link 是 react-router-dom 提供的组件，用于声明式导航。它会渲染为一个 <a> 标签，但不会触发页面刷新。

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

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

使用 useNavigate Hook

在函数组件中，可以使用 useNavigate Hook 进行编程式导航。

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

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

  const handleClick = () => {
    navigate('/target-path');
    // 也可以传递状态
    navigate('/target-path', { state: { key: 'value' } });
  };

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

使用 history 对象（v5 及以下版本）

在旧版 react-router-dom（v5 及以下）中，可以通过 history 对象跳转。

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

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

  const handleClick = () => {
    history.push('/target-path');
    // 或替换当前路由
    history.replace('/target-path');
  };

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

路由跳转时传递参数

可以通过 URL 参数、查询参数或状态传递数据。

// URL 参数（需在路由配置中定义）
navigate('/user/123');

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

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

重定向

使用 Navigate 组件可以在渲染时直接重定向。

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

function MyComponent() {
  const isLoggedIn = false;

  if (!isLoggedIn) {
    return <Navigate to="/login" />;
  }

  return <div>Protected Content</div>;
}

注意事项

• 确保项目已安装 react-router-dom（v6 或更高版本推荐）。
• 路由跳转前需确保目标路由已在路由配置中定义。
• 使用 useNavigate 或 useHistory 时，组件必须在 Router 的上下文中。

以上方法覆盖了 React 中路由跳转的主要场景，可根据具体需求选择合适的方式。