react路由如何跳转

React 路由跳转方法

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

使用 Link 组件

Link 是 react-router-dom 提供的组件，用于声明式导航。点击 Link 会跳转到指定的路由路径。

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

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

使用 useNavigate Hook

useNavigate 是 React Router v6 引入的 Hook，用于编程式导航。可以在事件处理函数或其他逻辑中调用。

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

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

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

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

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

在 React Router v5 及以下版本中，可以通过 history 对象实现编程式导航。

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

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

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

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

路由跳转时传递参数

可以通过 state 或 URL 参数传递数据。

// 使用 state 传递参数
navigate('/target-path', { state: { id: 1 } });

// 使用 URL 参数
navigate('/target-path/123');

动态路由跳转

动态路由可以通过路径参数实现，例如 /user/:id。

// 定义动态路由
<Route path="/user/:id" element={<UserPage />} />

// 跳转到动态路由
navigate('/user/123');

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