如何将Tailwind CSS与React路由结合构建美观且功能完善的单页应用提升用户体验和开发效率并解决常见导航问题

引言

在现代前端开发中，构建美观且功能完善的单页应用（SPA）已成为主流趋势。React作为最受欢迎的前端框架之一，提供了强大的组件化开发能力，而React Router则是React生态系统中用于处理路由的首选库。与此同时，Tailwind CSS作为一个实用优先的CSS框架，为开发者提供了快速构建美观界面的工具集。

将Tailwind CSS与React Router结合使用，可以显著提升开发效率，同时创建出视觉吸引力强、用户体验良好的单页应用。本文将详细介绍如何将这两种技术有效结合，解决常见的导航问题，并实现最佳的用户体验。

环境设置

创建React应用并安装依赖

首先，我们需要创建一个新的React应用并安装必要的依赖：

# 创建React应用 npx create-react-app react-router-tailwind-app cd react-router-tailwind-app # 安装React Router npm install react-router-dom # 安装Tailwind CSS及其依赖 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

配置Tailwind CSS

接下来，我们需要配置Tailwind CSS。首先，在tailwind.config.js文件中配置内容源：

module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }

然后，在src/index.css文件中引入Tailwind的基础样式：

@tailwind base; @tailwind components; @tailwind utilities;

项目结构建议

为了保持代码的组织性和可维护性，建议采用以下项目结构：

src/ ├── components/ │ ├── Layout/ │ │ ├── Header.js │ │ ├── Footer.js │ │ └── Navigation.js │ └── Shared/ │ └── Button.js ├── pages/ │ ├── Home.js │ ├── About.js │ ├── Contact.js │ └── Dashboard/ │ ├── Overview.js │ ├── Settings.js │ └── Profile.js ├── hooks/ │ └── useAuth.js ├── App.js ├── index.js └── routes/ └── index.js

基础路由设置

配置路由

在src/routes/index.js文件中，我们可以设置应用的路由配置：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Home from '../pages/Home'; import About from '../pages/About'; import Contact from '../pages/Contact'; import Dashboard from '../pages/Dashboard'; import DashboardOverview from '../pages/Dashboard/Overview'; import DashboardSettings from '../pages/Dashboard/Settings'; import DashboardProfile from '../pages/Dashboard/Profile'; const AppRoutes = () => { return ( <Router> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> <Route path="/contact" element={<Contact />} /> <Route path="/dashboard" element={<Dashboard />}> <Route index element={<DashboardOverview />} /> <Route path="settings" element={<DashboardSettings />} /> <Route path="profile" element={<DashboardProfile />} /> </Route> </Routes> </Router> ); }; export default AppRoutes;

在App.js中使用路由配置

修改src/App.js文件，使用我们刚刚创建的路由配置：

import AppRoutes from './routes'; function App() { return <AppRoutes />; } export default App;

使用Tailwind CSS美化导航

创建导航组件

现在，让我们创建一个美观的导航组件。在src/components/Layout/Navigation.js文件中：

import { Link, useLocation } from 'react-router-dom'; const Navigation = () => { const location = useLocation(); const navItems = [ { path: '/', label: '首页' }, { path: '/about', label: '关于我们' }, { path: '/contact', label: '联系我们' }, { path: '/dashboard', label: '仪表盘' }, ]; return ( <nav className="bg-indigo-600 text-white shadow-lg"> <div className="container mx-auto px-4"> <div className="flex justify-between items-center py-4"> <div className="text-xl font-bold">我的应用</div> <div className="flex space-x-4"> {navItems.map((item) => ( <Link key={item.path} to={item.path} className={`px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${ location.pathname === item.path ? 'bg-indigo-800 text-white' : 'text-indigo-200 hover:bg-indigo-700 hover:text-white' }`} > {item.label} </Link> ))} </div> </div> </div> </nav> ); }; export default Navigation;

创建布局组件

在src/components/Layout/Header.js中创建页头组件：

import Navigation from './Navigation'; const Header = () => { return ( <header className="bg-white shadow"> <Navigation /> </header> ); }; export default Header;

在src/components/Layout/Footer.js中创建页脚组件：

const Footer = () => { return ( <footer className="bg-gray-800 text-white py-6"> <div className="container mx-auto px-4"> <div className="flex flex-col md:flex-row justify-between items-center"> <div className="mb-4 md:mb-0"> <h3 className="text-lg font-semibold">我的应用</h3> <p className="text-gray-400">© 2023 版权所有</p> </div> <div className="flex space-x-4"> <a href="#" className="text-gray-400 hover:text-white transition-colors duration-200"> 隐私政策 </a> <a href="#" className="text-gray-400 hover:text-white transition-colors duration-200"> 使用条款 </a> <a href="#" className="text-gray-400 hover:text-white transition-colors duration-200"> 联系我们 </a> </div> </div> </div> </footer> ); }; export default Footer;

创建布局包装组件

创建一个布局组件，用于包装我们的页面内容。在src/components/Layout/Layout.js中：

import Header from './Header'; import Footer from './Footer'; const Layout = ({ children }) => { return ( <div className="min-h-screen flex flex-col"> <Header /> <main className="flex-grow container mx-auto px-4 py-8"> {children} </main> <Footer /> </div> ); }; export default Layout;

更新路由配置以使用布局

现在，让我们更新路由配置以使用我们创建的布局组件。修改src/routes/index.js：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Layout from '../components/Layout/Layout'; import Home from '../pages/Home'; import About from '../pages/About'; import Contact from '../pages/Contact'; import Dashboard from '../pages/Dashboard'; import DashboardOverview from '../pages/Dashboard/Overview'; import DashboardSettings from '../pages/Dashboard/Settings'; import DashboardProfile from '../pages/Dashboard/Profile'; const AppRoutes = () => { return ( <Router> <Routes> <Route path="/" element={<Layout><Home /></Layout>} /> <Route path="/about" element={<Layout><About /></Layout>} /> <Route path="/contact" element={<Layout><Contact /></Layout>} /> <Route path="/dashboard" element={<Layout><Dashboard /></Layout>}> <Route index element={<DashboardOverview />} /> <Route path="settings" element={<DashboardSettings />} /> <Route path="profile" element={<DashboardProfile />} /> </Route> </Routes> </Router> ); }; export default AppRoutes;

高级路由功能

嵌套路由

React Router支持嵌套路由，这对于构建具有复杂布局的应用非常有用。我们已经在上面的路由配置中看到了嵌套路由的例子。现在，让我们创建仪表盘组件，它将包含自己的子导航。

在src/pages/Dashboard.js中：

import { Outlet, Link, useLocation } from 'react-router-dom'; const Dashboard = () => { const location = useLocation(); const dashboardNavItems = [ { path: '/dashboard', label: '概览' }, { path: '/dashboard/settings', label: '设置' }, { path: '/dashboard/profile', label: '个人资料' }, ]; return ( <div className="bg-white rounded-lg shadow-md p-6"> <h1 className="text-2xl font-bold text-gray-800 mb-6">仪表盘</h1> <div className="flex flex-col md:flex-row gap-6"> {/* 侧边导航 */} <div className="w-full md:w-64"> <nav className="bg-gray-100 rounded-lg p-4"> <ul className="space-y-2"> {dashboardNavItems.map((item) => ( <li key={item.path}> <Link to={item.path} className={`block px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${ location.pathname === item.path ? 'bg-indigo-600 text-white' : 'text-gray-700 hover:bg-gray-200' }`} > {item.label} </Link> </li> ))} </ul> </nav> </div> {/* 内容区域 */} <div className="flex-grow"> <Outlet /> </div> </div> </div> ); }; export default Dashboard;

动态路由

动态路由允许我们创建带有参数的路由，这对于显示特定用户、产品或文章的详情页面非常有用。

让我们创建一个博客文章详情页面作为示例。首先，在路由配置中添加动态路由：

// 在 src/routes/index.js 中添加 import BlogPost from '../pages/BlogPost'; // 在Routes组件中添加 <Route path="/blog/:id" element={<Layout><BlogPost /></Layout>} />

然后，创建博客文章详情页面组件src/pages/BlogPost.js：

import { useParams, Link } from 'react-router-dom'; import { useState, useEffect } from 'react'; const BlogPost = () => { const { id } = useParams(); const [post, setPost] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { // 模拟API调用 const fetchPost = async () => { setLoading(true); // 在实际应用中，这里会是一个真实的API调用 const mockPost = { id: parseInt(id), title: `博客文章 #${id}`, content: `这是博客文章 #${id} 的内容。这里可以包含文章的完整文本、图片和其他媒体内容。`, author: '作者姓名', date: '2023-06-15' }; // 模拟网络延迟 setTimeout(() => { setPost(mockPost); setLoading(false); }, 500); }; fetchPost(); }, [id]); if (loading) { return ( <div className="flex justify-center items-center h-64"> <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-600"></div> </div> ); } if (!post) { return ( <div className="bg-white rounded-lg shadow-md p-6"> <h1 className="text-2xl font-bold text-gray-800 mb-4">文章未找到</h1> <p className="text-gray-600 mb-4">抱歉，我们找不到您请求的文章。</p> <Link to="/" className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition-colors duration-200" > 返回首页 </Link> </div> ); } return ( <div className="bg-white rounded-lg shadow-md p-6"> <h1 className="text-3xl font-bold text-gray-800 mb-4">{post.title}</h1> <div className="flex items-center text-sm text-gray-600 mb-6"> <span>作者: {post.author}</span> <span className="mx-2">•</span> <span>发布日期: {post.date}</span> </div> <div className="prose max-w-none mb-8"> <p>{post.content}</p> </div> <Link to="/" className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition-colors duration-200" > 返回首页 </Link> </div> ); }; export default BlogPost;

路由守卫和权限控制

在实际应用中，我们通常需要保护某些路由，只有经过身份验证的用户才能访问。让我们创建一个简单的路由守卫系统。

首先，创建一个身份验证上下文。在src/hooks/useAuth.js中：

import { createContext, useContext, useState } from 'react'; const AuthContext = createContext(); export const AuthProvider = ({ children }) => { const [isAuthenticated, setIsAuthenticated] = useState(false); const [user, setUser] = useState(null); const login = (userData) => { setIsAuthenticated(true); setUser(userData); }; const logout = () => { setIsAuthenticated(false); setUser(null); }; return ( <AuthContext.Provider value={{ isAuthenticated, user, login, logout }}> {children} </AuthContext.Provider> ); }; export const useAuth = () => useContext(AuthContext);

然后，创建一个受保护的路由组件。在src/components/ProtectedRoute.js中：

import { Navigate } from 'react-router-dom'; import { useAuth } from '../hooks/useAuth'; const ProtectedRoute = ({ children }) => { const { isAuthenticated } = useAuth(); if (!isAuthenticated) { // 重定向到登录页面 return <Navigate to="/login" replace />; } return children; }; export default ProtectedRoute;

现在，让我们更新路由配置以使用受保护的路由：

// 在 src/routes/index.js 中 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { AuthProvider } from '../hooks/useAuth'; import Layout from '../components/Layout/Layout'; import ProtectedRoute from '../components/ProtectedRoute'; import Home from '../pages/Home'; import About from '../pages/About'; import Contact from '../pages/Contact'; import Dashboard from '../pages/Dashboard'; import DashboardOverview from '../pages/Dashboard/Overview'; import DashboardSettings from '../pages/Dashboard/Settings'; import DashboardProfile from '../pages/Dashboard/Profile'; import Login from '../pages/Login'; import BlogPost from '../pages/BlogPost'; const AppRoutes = () => { return ( <AuthProvider> <Router> <Routes> <Route path="/" element={<Layout><Home /></Layout>} /> <Route path="/about" element={<Layout><About /></Layout>} /> <Route path="/contact" element={<Layout><Contact /></Layout>} /> <Route path="/blog/:id" element={<Layout><BlogPost /></Layout>} /> <Route path="/login" element={<Layout><Login /></Layout>} /> <Route path="/dashboard" element={ <ProtectedRoute> <Layout><Dashboard /></Layout> </ProtectedRoute> } > <Route index element={<DashboardOverview />} /> <Route path="settings" element={<DashboardSettings />} /> <Route path="profile" element={<DashboardProfile />} /> </Route> </Routes> </Router> </AuthProvider> ); }; export default AppRoutes;

最后，创建一个登录页面组件src/pages/Login.js：

import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { useAuth } from '../hooks/useAuth'; const Login = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const { login } = useAuth(); const navigate = useNavigate(); const handleSubmit = (e) => { e.preventDefault(); // 简单的表单验证 if (!username || !password) { setError('请输入用户名和密码'); return; } // 在实际应用中，这里会有一个API调用来验证凭据 if (username === 'admin' && password === 'password') { const userData = { username, role: 'admin' }; login(userData); navigate('/dashboard'); } else { setError('无效的用户名或密码'); } }; return ( <div className="flex justify-center items-center min-h-screen bg-gray-100"> <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-md"> <h1 className="text-2xl font-bold text-center text-gray-800 mb-6">登录</h1> {error && ( <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4"> {error} </div> )} <form onSubmit={handleSubmit}> <div className="mb-4"> <label htmlFor="username" className="block text-gray-700 font-medium mb-2"> 用户名 </label> <input type="text" id="username" value={username} onChange={(e) => setUsername(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="输入用户名" /> </div> <div className="mb-6"> <label htmlFor="password" className="block text-gray-700 font-medium mb-2"> 密码 </label> <input type="password" id="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="输入密码" /> </div> <button type="submit" className="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" > 登录 </button> </form> <div className="mt-4 text-center text-sm text-gray-600"> <p>测试账号: admin / password</p> </div> </div> </div> ); }; export default Login;

解决常见导航问题

活动链接状态

在我们的导航组件中，我们已经使用了useLocation钩子来确定当前活动链接，并应用了相应的样式。这是一种简单有效的方式来突出显示当前页面的链接。

路由过渡动画

为了提升用户体验，我们可以为路由切换添加过渡动画。首先，安装react-transition-group：

npm install react-transition-group

然后，创建一个动画包装组件。在src/components/AnimatedRoutes.js中：

import { Routes, Route, useLocation } from 'react-router-dom'; import { CSSTransition, TransitionGroup } from 'react-transition-group'; import Layout from './Layout/Layout'; import Home from '../pages/Home'; import About from '../pages/About'; import Contact from '../pages/Contact'; import Dashboard from '../pages/Dashboard'; import DashboardOverview from '../pages/Dashboard/Overview'; import DashboardSettings from '../pages/Dashboard/Settings'; import DashboardProfile from '../pages/Dashboard/Profile'; import Login from '../pages/Login'; import BlogPost from '../pages/BlogPost'; import ProtectedRoute from './ProtectedRoute'; import { AuthProvider } from '../hooks/useAuth'; const AnimatedRoutes = () => { const location = useLocation(); return ( <AuthProvider> <TransitionGroup> <CSSTransition key={location.key} timeout={300} classNames="fade" unmountOnExit > <Routes location={location}> <Route path="/" element={<Layout><Home /></Layout>} /> <Route path="/about" element={<Layout><About /></Layout>} /> <Route path="/contact" element={<Layout><Contact /></Layout>} /> <Route path="/blog/:id" element={<Layout><BlogPost /></Layout>} /> <Route path="/login" element={<Layout><Login /></Layout>} /> <Route path="/dashboard" element={ <ProtectedRoute> <Layout><Dashboard /></Layout> </ProtectedRoute> } > <Route index element={<DashboardOverview />} /> <Route path="settings" element={<DashboardSettings />} /> <Route path="profile" element={<DashboardProfile />} /> </Route> </Routes> </CSSTransition> </TransitionGroup> </AuthProvider> ); }; export default AnimatedRoutes;

接下来，在src/index.css中添加过渡动画的CSS：

/* 路由过渡动画 */ .fade-enter { opacity: 0; transform: translateX(20px); } .fade-enter-active { opacity: 1; transform: translateX(0); transition: opacity 300ms, transform 300ms; } .fade-exit { opacity: 1; transform: translateX(0); } .fade-exit-active { opacity: 0; transform: translateX(-20px); transition: opacity 300ms, transform 300ms; }

最后，更新src/routes/index.js以使用动画路由：

import { BrowserRouter } from 'react-router-dom'; import AnimatedRoutes from '../components/AnimatedRoutes'; const AppRoutes = () => { return ( <BrowserRouter> <AnimatedRoutes /> </BrowserRouter> ); }; export default AppRoutes;

滚动行为控制

在单页应用中，当用户导航到新页面时，我们通常希望滚动到页面顶部。我们可以创建一个自定义钩子来处理这个问题。

在src/hooks/useScrollToTop.js中：

import { useEffect } from 'react'; import { useLocation } from 'react-router-dom'; const useScrollToTop = () => { const { pathname } = useLocation(); useEffect(() => { window.scrollTo(0, 0); }, [pathname]); }; export default useScrollToTop;

然后，在布局组件中使用这个钩子：

import { Outlet } from 'react-router-dom'; import Header from './Header'; import Footer from './Footer'; import useScrollToTop from '../../hooks/useScrollToTop'; const Layout = ({ children }) => { useScrollToTop(); return ( <div className="min-h-screen flex flex-col"> <Header /> <main className="flex-grow container mx-auto px-4 py-8"> {children || <Outlet />} </main> <Footer /> </div> ); }; export default Layout;

性能优化

代码分割和懒加载

为了提高应用的加载性能，我们可以使用React的lazy和Suspense来实现路由级别的代码分割。

修改src/routes/index.js以使用懒加载：

import { BrowserRouter } from 'react-router-dom'; import { Suspense, lazy } from 'react'; import AnimatedRoutes from '../components/AnimatedRoutes'; // 懒加载页面组件 const Home = lazy(() => import('../pages/Home')); const About = lazy(() => import('../pages/About')); const Contact = lazy(() => import('../pages/Contact')); const Dashboard = lazy(() => import('../pages/Dashboard')); const DashboardOverview = lazy(() => import('../pages/Dashboard/Overview')); const DashboardSettings = lazy(() => import('../pages/Dashboard/Settings')); const DashboardProfile = lazy(() => import('../pages/Dashboard/Profile')); const Login = lazy(() => import('../pages/Login')); const BlogPost = lazy(() => import('../pages/BlogPost')); // 创建一个加载指示器组件 const PageLoader = () => ( <div className="flex justify-center items-center h-64"> <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-600"></div> </div> ); // 更新AnimatedRoutes组件以使用懒加载 const AnimatedRoutes = () => { const location = useLocation(); return ( <AuthProvider> <TransitionGroup> <CSSTransition key={location.key} timeout={300} classNames="fade" unmountOnExit > <Routes location={location}> <Route path="/" element={ <Suspense fallback={<PageLoader />}> <Layout><Home /></Layout> </Suspense> } /> <Route path="/about" element={ <Suspense fallback={<PageLoader />}> <Layout><About /></Layout> </Suspense> } /> <Route path="/contact" element={ <Suspense fallback={<PageLoader />}> <Layout><Contact /></Layout> </Suspense> } /> <Route path="/blog/:id" element={ <Suspense fallback={<PageLoader />}> <Layout><BlogPost /></Layout> </Suspense> } /> <Route path="/login" element={ <Suspense fallback={<PageLoader />}> <Layout><Login /></Layout> </Suspense> } /> <Route path="/dashboard" element={ <ProtectedRoute> <Suspense fallback={<PageLoader />}> <Layout><Dashboard /></Layout> </Suspense> </ProtectedRoute> } > <Route index element={ <Suspense fallback={<PageLoader />}> <DashboardOverview /> </Suspense> } /> <Route path="settings" element={ <Suspense fallback={<PageLoader />}> <DashboardSettings /> </Suspense> } /> <Route path="profile" element={ <Suspense fallback={<PageLoader />}> <DashboardProfile /> </Suspense> } /> </Route> </Routes> </CSSTransition> </TransitionGroup> </AuthProvider> ); }; const AppRoutes = () => { return ( <BrowserRouter> <AnimatedRoutes /> </BrowserRouter> ); }; export default AppRoutes;

预加载策略

我们可以实现一个预加载策略，当用户将鼠标悬停在链接上时，提前加载对应的路由组件。这可以进一步改善用户体验。

创建一个自定义链接组件，在src/components/PreloadLink.js中：

import { Link } from 'react-router-dom'; import { useState } from 'react'; const PreloadLink = ({ to, children, ...props }) => { const [preloadTimer, setPreloadTimer] = useState(null); const handleMouseEnter = () => { // 设置一个短暂的延迟，避免不必要的预加载 const timer = setTimeout(() => { // 使用动态导入预加载组件 import(`../pages/${to.split('/')[1]}.js`).catch((error) => { console.error('预加载失败:', error); }); }, 200); setPreloadTimer(timer); }; const handleMouseLeave = () => { if (preloadTimer) { clearTimeout(preloadTimer); setPreloadTimer(null); } }; return ( <Link to={to} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} {...props} > {children} </Link> ); }; export default PreloadLink;

然后，在导航组件中使用这个预加载链接：

import { useLocation } from 'react-router-dom'; import PreloadLink from '../PreloadLink'; const Navigation = () => { const location = useLocation(); const navItems = [ { path: '/', label: '首页' }, { path: '/about', label: '关于我们' }, { path: '/contact', label: '联系我们' }, { path: '/dashboard', label: '仪表盘' }, ]; return ( <nav className="bg-indigo-600 text-white shadow-lg"> <div className="container mx-auto px-4"> <div className="flex justify-between items-center py-4"> <div className="text-xl font-bold">我的应用</div> <div className="flex space-x-4"> {navItems.map((item) => ( <PreloadLink key={item.path} to={item.path} className={`px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 ${ location.pathname === item.path ? 'bg-indigo-800 text-white' : 'text-indigo-200 hover:bg-indigo-700 hover:text-white' }`} > {item.label} </PreloadLink> ))} </div> </div> </div> </nav> ); }; export default Navigation;

最佳实践和技巧

组件组织

保持组件的单一职责原则，每个组件应该只负责一个特定的功能。例如，导航组件只负责导航，布局组件只负责页面布局。

响应式设计

使用Tailwind CSS的响应式工具类来创建适应不同屏幕尺寸的布局。例如：

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> {/* 内容 */} </div>

主题定制

Tailwind CSS允许我们通过配置文件轻松定制主题。在tailwind.config.js中：

module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: { colors: { primary: { 50: '#f0f9ff', 100: '#e0f2fe', 200: '#bae6fd', 300: '#7dd3fc', 400: '#38bdf8', 500: '#0ea5e9', 600: '#0284c7', 700: '#0369a1', 800: '#075985', 900: '#0c4a6e', }, }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, plugins: [], }

可访问性

确保我们的导航和链接对所有用户都是可访问的。使用语义化的HTML元素，如<nav>、<ul>、<li>等，并添加适当的ARIA属性：

<nav aria-label="主导航"> <ul> {navItems.map((item) => ( <li key={item.path}> <Link to={item.path} aria-current={location.pathname === item.path ? 'page' : undefined} > {item.label} </Link> </li> ))} </ul> </nav>

错误处理

创建一个错误边界组件来捕获和处理路由级别的错误。在src/components/ErrorBoundary.js中：

import { Component } from 'react'; import { Link } from 'react-router-dom'; class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { return { hasError: true }; } componentDidCatch(error, errorInfo) { console.error('错误边界捕获到错误:', error, errorInfo); } render() { if (this.state.hasError) { return ( <div className="bg-white rounded-lg shadow-md p-6 text-center"> <h1 className="text-2xl font-bold text-gray-800 mb-4">出现错误</h1> <p className="text-gray-600 mb-6">抱歉，应用程序遇到了一个错误。</p> <Link to="/" className="inline-block bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700 transition-colors duration-200" > 返回首页 </Link> </div> ); } return this.props.children; } } export default ErrorBoundary;

然后，在布局组件中使用错误边界：

import { Outlet } from 'react-router-dom'; import Header from './Header'; import Footer from './Footer'; import useScrollToTop from '../../hooks/useScrollToTop'; import ErrorBoundary from './ErrorBoundary'; const Layout = ({ children }) => { useScrollToTop(); return ( <div className="min-h-screen flex flex-col"> <Header /> <main className="flex-grow container mx-auto px-4 py-8"> <ErrorBoundary> {children || <Outlet />} </ErrorBoundary> </main> <Footer /> </div> ); }; export default Layout;