react如何使用link跳转

使用 React Router 的 Link 组件进行跳转

在 React 中，使用 Link 组件可以实现客户端路由跳转，避免页面刷新。需要先安装 react-router-dom 包。

安装依赖：

npm install react-router-dom

基本用法

在组件中导入 Link 并设置 to 属性指定目标路径：

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

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

动态路由跳转

可以通过模板字符串传递动态参数：

<Link to={`/user/${userId}`}>User Profile</Link>

传递状态参数

跳转时可以携带状态对象，目标路由可通过 useLocation 获取：

<Link 
  to="/dashboard" 
  state={{ from: 'navbar' }}
>
  Dashboard
</Link>

样式控制

支持直接添加 className 或 style 属性：

<Link 
  to="/contact" 
  className="menu-item"
  style={{ color: 'blue' }}
>
  Contact
</Link>

替换当前历史记录

设置 replace 属性可替换历史记录而非新增：

<Link to="/login" replace>Login</Link>

注意事项

• 必须在 BrowserRouter 或 HashRouter 组件内部使用
• 与 a 标签不同，Link 不会触发页面刷新
• 复杂交互场景可结合 useNavigate hook 实现编程式导航