react如何路由跳转

React 路由跳转方法

在 React 中实现路由跳转通常依赖于 react-router-dom 库。以下是几种常见的路由跳转方式：

使用 Link 组件

Link 是 react-router-dom 提供的组件，用于声明式导航。它会在不刷新页面的情况下更新 URL 和渲染对应的组件。

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

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

使用 useNavigate Hook

在函数组件中，可以通过 useNavigate Hook 进行编程式导航。这种方式适合在事件处理函数中触发跳转。

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

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

  const handleClick = () => {
    navigate('/about');
  };

  return (
    <button onClick={handleClick}>跳转到 About 页面</button>
  );
}

传递参数

可以通过 URL 参数或 state 传递数据到目标路由。

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

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

重定向

使用 Navigate 组件可以在渲染时直接重定向到目标路由。

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

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

历史记录操作

useNavigate 还支持前进、后退等历史记录操作。

navigate(-1); // 后退一步
navigate(1);  // 前进一步

注意事项

1. 确保项目已安装 react-router-dom（v6 或更高版本）。
2. 路由跳转前需在根组件中配置好路由（如使用 BrowserRouter 和 Routes）。
3. 动态路由参数需在目标组件中通过 useParams Hook 获取。