react如何写跳转

React 路由跳转方法

在 React 中实现页面跳转通常使用 react-router-dom 库，以下是几种常见的跳转方式：

使用 Link 组件

Link 是 react-router-dom 提供的导航组件，类似于 HTML 的 <a> 标签，但不会触发页面刷新：

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

function NavBar() {
  return (
    <nav>
      <Link to="/home">Home</Link>
      <Link to="/about">About</Link>
    </nav>
  );
}

使用 useNavigate Hook

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

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

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

  const handleClick = () => {
    navigate('/target-path'); // 基本跳转
    navigate('/target-path', { state: { data: 'value' } }); // 带状态跳转
    navigate(-1); // 返回上一页
  };

  return <button onClick={handleClick}>Go to Target</button>;
}

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

在 React Router v5 及更早版本中，可以通过 history 对象跳转：

// 类组件中
this.props.history.push('/target-path');

// 通过withRouter高阶组件
import { withRouter } from 'react-router-dom';

const MyComponent = ({ history }) => (
  <button onClick={() => history.push('/target')}>Go</button>
);

export default withRouter(MyComponent);

路由重定向

使用 Navigate 组件或 useNavigate 实现条件重定向：

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

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

路由参数传递

跳转时可以通过 URL 参数或状态传递数据：

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

// 查询参数
navigate('/search?query=react');

// 状态对象
navigate('/detail', { state: { id: 123 } });

注意事项

• 确保项目已安装 react-router-dom（最新推荐 v6+版本）
• 应用最外层需要用 <BrowserRouter> 或 <HashRouter> 包裹
• 路径匹配规则在 v6 版本有较大变化，需注意版本差异
• 动态路由参数需在目标组件中用 useParams 获取