react如何使用link
使用 Link 组件进行页面导航
在 React 中，Link 是 react-router-dom 提供的组件，用于在单页应用（SPA）中实现客户端路由导航，避免页面刷新。
安装 react-router-dom
确保项目中已安装 react-router-dom：
npm install react-router-dom基本用法
在组件中引入 Link，并通过 to 属性指定目标路径：
import { Link } from "react-router-dom";
function NavBar() {
return (
<nav>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
</nav>
);
}动态路径参数
通过模板字符串或对象传递动态参数：
<Link to={`/user/${userId}`}>用户详情</Link>
// 或使用对象形式
<Link to={{ pathname: "/user", search: "?id=123", state: { fromNav: true } }}>
用户详情
</Link>样式与自定义组件
可以为 Link 添加类名或内联样式：
<Link to="/contact" className="nav-link" style={{ color: "blue" }}>
联系我们
</Link>替换当前历史记录
使用 replace 属性避免历史记录堆叠：
<Link to="/login" replace>登录</Link>嵌套路由中的 Link
在嵌套路由结构中，路径应相对于父路由：
<Link to="profile">个人资料</Link> // 假设当前路由是 /user注意事项
Link必须在BrowserRouter或HashRouter的上下文中使用。- 外部链接（非 SPA 路由）应使用
<a>标签并设置rel="noopener noreferrer"。 - 通过
state传递的数据可在目标组件的useLocation()中获取。
