react如何使用link

使用 React Router 的 Link 组件

React Router 提供的 Link 组件用于在应用内导航，避免页面刷新，实现单页应用（SPA）的无缝跳转。

安装 React Router：

npm install react-router-dom

引入 Link：

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

基本用法

将 Link 作为导航元素包裹内容，通过 to 属性指定目标路径：

<Link to="/about">关于我们</Link>

动态路径参数

传递动态参数到路由：

<Link to="/user/123">用户详情</Link>

对应路由需配置参数接收：

<Route path="/user/:id" component={UserDetail} />

传递状态

通过 state 属性传递状态数据：

<Link to="/profile" state={{ fromDashboard: true }}>个人资料</Link>

在目标组件中通过 useLocation 获取状态：

const location = useLocation();
console.log(location.state); // { fromDashboard: true }

样式控制

直接为 Link 添加 className 或内联样式：

<Link to="/contact" className="nav-link" style={{ color: 'blue' }}>联系我们</Link>

替换历史记录

使用 replace 属性替换当前历史记录而非添加新条目：

<Link to="/login" replace>登录</Link>

外部链接处理

对于外部链接，建议使用原生 <a> 标签而非 Link：

<a href="https://example.com" target="_blank" rel="noopener noreferrer">外部网站</a>

注意事项

• Link 必须在 BrowserRouter 或 HashRouter 的上下文中使用
• 避免在 Link 内嵌套交互式元素（如按钮）
• 路径应匹配路由配置，否则可能导致导航失败