react如何使用link

使用 React Router 中的 Link

在 React 应用中，Link 是 react-router-dom 库提供的组件，用于实现客户端路由导航。它不会触发页面刷新，而是通过 React Router 的内部机制更新 URL 和渲染对应的组件。

安装 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>

// 或使用对象形式
<Link to={{ pathname: '/user', search: '?id=123', state: { fromNav: true } }}>
  User Details
</Link>

样式控制

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

<Link to="/contact" className="nav-link" style={{ color: 'blue' }}>
  Contact Us
</Link>

替换当前历史记录

设置 replace 属性可替换当前历史记录而非添加新条目：

<Link to="/dashboard" replace>
  Go to Dashboard
</Link>

注意事项

• Link 必须在 BrowserRouter 或 HashRouter 的上下文环境中使用。
• 与原生 <a> 标签不同，Link 不会重新加载整个页面。
• 复杂路由逻辑（如权限验证）应结合 useNavigate 钩子实现。

通过以上方式可以灵活地在 React 应用中实现路由导航功能。