react如何使用link
使用 Link 进行路由导航
在 React 中，Link 是 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="/">Home</Link>
<Link to="/about">About</Link>
</nav>
);
}动态路由参数
通过模板字符串传递动态参数：
<Link to={`/user/${userId}`}>User Profile</Link>传递状态
通过 state 属性传递数据，目标页面可通过 useLocation 获取：
<Link
to="/details"
state={{ fromDashboard: true }}
>
View Details
</Link>目标页面接收状态：
import { useLocation } from 'react-router-dom';
function DetailsPage() {
const location = useLocation();
console.log(location.state); // { fromDashboard: true }
}样式与自定义组件
可以直接为 Link 添加类名或内联样式：
<Link
to="/contact"
className="nav-link"
style={{ color: 'blue' }}
>
Contact
</Link>替换当前历史记录
使用 replace 属性避免添加新历史记录：
<Link to="/login" replace>Login</Link>注意事项
- 确保
Link在BrowserRouter或类似路由组件内部使用。 to属性可以是字符串或对象（如{ pathname: '/search', search: '?query=test' }）。- 避免在
Link内嵌套交互式元素（如按钮），可能引发事件冒泡问题。
通过以上方式，Link 能够高效管理 React 应用的路由跳转，同时保持页面状态和用户体验。
