React与Tailwind CSS中的链接处理：基础与实践

import React from 'react';

function LinkExample() {
  return (
    <div className="p-6 bg-gray-50 min-h-screen flex flex-col items-center justify-center">
      <h1 className="text-3xl font-bold text-gray-800 mb-6">链接样式示例</h1>

      {/* 外部链接示例 */}
      <p className="mb-4 text-gray-700">
        这是一个指向外部网站的链接：
        <a 
          href="https://www.php.cn/link/2f7eaf16eceec07fc19c93090e90033a" 
          target="_blank" 
          rel="noopener noreferrer" 
          className="ml-2 text-blue-600 hover:text-blue-800 hover:underline transition duration-300 ease-in-out font-medium"
        >
          访问示例网站
        </a>
      </p>

      {/* 内部链接（此处仅作演示，实际内部路由需配合路由库） */}
      <p className="text-gray-700">
        这是一个指向应用内部页面的链接（无路由库时会刷新页面）：
        <a 
          href="/about" 
          className="ml-2 text-purple-600 hover:text-purple-800 hover:underline transition duration-300 ease-in-out font-medium"
        >
          关于我们
        </a>
      </p>
    </div>
  );
}

export default LinkExample;

npm install react-router-dom
# 或者
yarn add react-router-dom

import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

// 假设这是你的页面组件
function Home() {
  return (
    <div className="p-8 text-center">
      <h2 className="text-2xl font-semibold text-gray-800 mb-4">欢迎来到首页！</h2>
      <p className="text-gray-600">点击导航栏链接体验无刷新跳转。</p>
    </div>
  );
}

function About() {
  return (
    <div className="p-8 text-center">
      <h2 className="text-2xl font-semibold text-gray-800 mb-4">关于我们</h2>
      <p className="text-gray-600">这是一个关于页面，展示了内部路由的功能。</p>
    </div>
  );
}

function App() {
  return (
    <Router>
      <nav className="bg-gray-800 p-4 shadow-md">
        <ul className="flex justify-center space-x-6">
          <li>
            <Link 
              to="/" 
              className="text-white hover:text-blue-400 hover:underline transition duration-200 ease-in-out font-medium"
            >
              首页
            </Link>
          </li>
          <li>
            <Link 
              to="/about" 
              className="text-white hover:text-blue-400 hover:underline transition duration-200 ease-in-out font-medium"
            >
              关于
            </Link>
          </li>
          <li>
            {/* 外部链接仍使用a标签 */}
            <a 
              href="https://react.dev" 
              target="_blank" 
              rel="noopener noreferrer" 
              className="text-white hover:text-green-400 hover:underline transition duration-200 ease-in-out font-medium"
            >
              React官方文档 (外部)
            </a>
          </li>
        </ul>
      </nav>

      <div className="container mx-auto mt-8">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
          {/* 可以添加更多路由 */}
        </Routes>
      </div>
    </Router>
  );
}

export default App;