react中的link如何使用

React 中 Link 的基本用法

在 React 中，Link 是 react-router-dom 库提供的组件，用于实现单页应用（SPA）的导航。它通过 HTML5 的 History API 实现无刷新页面跳转。

安装依赖：

npm install react-router-dom

引入组件：

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

基础语法：

<Link to="/path">Link Text</Link>

Link 的属性参数

to 属性支持多种格式：

• 字符串路径：

  <Link to="/about">About</Link>

• 对象形式（可包含 state）：

  <Link to={{
    pathname: "/user",
    search: "?id=123",
    hash: "#section",
    state: { fromDashboard: true }
  }}>
    User
  </Link>

replace 属性（布尔值）：

<Link to="/home" replace>Home</Link>

动态路由与参数传递

配合路由参数使用：

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

通过 state 隐式传参：

<Link to="/details" state={{ itemId: 42 }}>Details</Link>

样式控制方法

添加 className：

<Link to="/contact" className="nav-link">Contact</Link>

行内样式：

<Link to="/faq" style={{ color: 'red' }}>FAQ</Link>

特殊场景处理

阻止默认事件：

<Link to="/download" onClick={e => e.preventDefault()}>
  Download
</Link>

自定义组件封装：

const CustomLink = ({ children, ...props }) => (
  <Link {...props}>
    <div className="custom-link">
      {children}
    </div>
  </Link>
);

注意事项

• 必须包裹在 BrowserRouter 或 Router 上下文环境中
• to 属性是必填项
• 与原生 <a> 标签不同，不会触发页面刷新
• 在 React Router v6 中移除了 component 等旧属性