React API集成與路由的最佳實踐
更新時間：2026年02月02日 10:14:55 作者：比特森林探險記
本文給大家介紹了React API集成與路由的最佳實踐,本文結合實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧
React API集成與路由
一、API集成
1. Fetch API
import { useState, useEffect } from 'react';
function ApiWithFetch() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// GET請求
const fetchUsers = async () => {
setLoading(true);
setError(null);
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users', {
method: 'GET',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer your-token-here' // 如果有的話
}
});
if (!response.ok) {
throw new Error(`HTTP錯誤: ${response.status}`);
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
// POST請求
const createUser = async (userData) => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userData)
});
if (!response.ok) {
throw new Error('創(chuàng)建失敗');
}
const newUser = await response.json();
return newUser;
} catch (err) {
console.error('創(chuàng)建用戶失敗:', err);
throw err;
}
};
// PUT/PATCH請求
const updateUser = async (id, updates) => {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
method: 'PUT', // 或 'PATCH'
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(updates)
});
if (!response.ok) {
throw new Error('更新失敗');
}
return await response.json();
} catch (err) {
console.error('更新用戶失敗:', err);
throw err;
}
};
// DELETE請求
const deleteUser = async (id) => {
try {
const response = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
method: 'DELETE',
});
if (!response.ok) {
throw new Error('刪除失敗');
}
return true;
} catch (err) {
console.error('刪除用戶失敗:', err);
throw err;
}
};
useEffect(() => {
fetchUsers();
}, []);
if (loading) return <div>加載中...</div>;
if (error) return <div>錯誤: {error}</div>;
return (
<div>
<h1>用戶列表</h1>
{data && (
<ul>
{data.map(user => (
<li key={user.id}>
{user.name} - {user.email}
</li>
))}
</ul>
)}
</div>
);
}2. Axios（推薦）
# 安裝axios npm install axios
import { useState, useEffect } from 'react';
import axios from 'axios';
// 創(chuàng)建axios實例
const api = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 10000,
headers: {
'Content-Type': 'application/json',
}
});
// 請求攔截器
api.interceptors.request.use(
(config) => {
// 添加token等
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 響應攔截器
api.interceptors.response.use(
(response) => response.data,
(error) => {
if (error.response) {
// 服務器返回錯誤狀態(tài)碼
switch (error.response.status) {
case 401:
// 未授權，跳轉登錄
window.location.href = '/login';
break;
case 403:
// 權限不足
console.error('權限不足');
break;
case 404:
console.error('資源不存在');
break;
case 500:
console.error('服務器錯誤');
break;
default:
console.error('請求失敗');
}
} else if (error.request) {
// 請求已發(fā)出但沒有響應
console.error('網絡錯誤，請檢查網絡連接');
} else {
// 請求配置錯誤
console.error('請求配置錯誤:', error.message);
}
return Promise.reject(error);
}
);
function ApiWithAxios() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
// GET請求
const fetchUsers = async () => {
setLoading(true);
setError(null);
try {
const response = await api.get('/users');
setUsers(response);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
// POST請求
const createUser = async (userData) => {
try {
const response = await api.post('/users', userData);
return response;
} catch (err) {
console.error('創(chuàng)建失敗:', err);
throw err;
}
};
// 并發(fā)請求
const fetchMultipleData = async () => {
try {
const [users, posts] = await Promise.all([
api.get('/users'),
api.get('/posts')
]);
return { users: users.data, posts: posts.data };
} catch (err) {
console.error('并發(fā)請求失敗:', err);
throw err;
}
};
// 帶取消請求
const fetchWithCancel = async () => {
const source = axios.CancelToken.source();
try {
const response = await api.get('/users', {
cancelToken: source.token
});
return response.data;
} catch (err) {
if (axios.isCancel(err)) {
console.log('請求被取消:', err.message);
} else {
throw err;
}
}
// 取消請求
return () => {
source.cancel('組件卸載，取消請求');
};
};
useEffect(() => {
fetchUsers();
}, []);
if (loading) return <div>加載中...</div>;
if (error) return <div>錯誤: {error}</div>;
return (
<div>
<h1>用戶列表 (Axios)</h1>
<ul>
{users.map(user => (
<li key={user.id}>
{user.name} - {user.email}
</li>
))}
</ul>
</div>
);
}3. React Query（強烈推薦）
# 安裝React Query npm install @tanstack/react-query
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from './api'; // 你的axios實例
function UsersWithReactQuery() {
const queryClient = useQueryClient();
// 獲取用戶列表
const {
data: users,
isLoading,
error,
refetch
} = useQuery({
queryKey: ['users'], // 查詢鍵
queryFn: () => api.get('/users'),
staleTime: 5 * 60 * 1000, // 5分鐘內數據不過期
cacheTime: 10 * 60 * 1000, // 10分鐘后清除緩存
retry: 3, // 失敗重試3次
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
});
// 創(chuàng)建用戶
const createUserMutation = useMutation({
mutationFn: (userData) => api.post('/users', userData),
onSuccess: () => {
// 用戶創(chuàng)建成功后，使users查詢無效，觸發(fā)重新獲取
queryClient.invalidateQueries({ queryKey: ['users'] });
},
onError: (error) => {
console.error('創(chuàng)建用戶失敗:', error);
}
});
// 更新用戶
const updateUserMutation = useMutation({
mutationFn: ({ id, ...updates }) => api.put(`/users/${id}`, updates),
onSuccess: (updatedUser) => {
// 樂觀更新：立即更新UI，不用等重新獲取
queryClient.setQueryData(['users'], (oldUsers) =>
oldUsers.map(user =>
user.id === updatedUser.id ? updatedUser : user
)
);
}
});
// 刪除用戶
const deleteUserMutation = useMutation({
mutationFn: (id) => api.delete(`/users/${id}`),
onMutate: async (id) => {
// 取消正在進行的查詢
await queryClient.cancelQueries({ queryKey: ['users'] });
// 保存之前的用戶列表
const previousUsers = queryClient.getQueryData(['users']);
// 樂觀更新
queryClient.setQueryData(['users'], (oldUsers) =>
oldUsers.filter(user => user.id !== id)
);
return { previousUsers };
},
onError: (err, id, context) => {
// 出錯時回滾
queryClient.setQueryData(['users'], context.previousUsers);
},
onSettled: () => {
// 完成后重新獲取
queryClient.invalidateQueries({ queryKey: ['users'] });
}
});
if (isLoading) return <div>加載中...</div>;
if (error) return <div>錯誤: {error.message}</div>;
return (
<div>
<h1>用戶列表 (React Query)</h1>
<button onClick={() => refetch()}>刷新</button>
<button onClick={() =>
createUserMutation.mutate({
name: '新用戶',
email: 'new@example.com'
})
}>
添加用戶
</button>
{users?.map(user => (
<div key={user.id} style={{ margin: '10px 0', padding: '10px', border: '1px solid #ddd' }}>
<h3>{user.name}</h3>
<p>{user.email}</p>
<button onClick={() =>
updateUserMutation.mutate({
id: user.id,
name: `${user.name} (已更新)`
})
}>
更新
</button>
<button onClick={() => deleteUserMutation.mutate(user.id)}>
刪除
</button>
</div>
))}
</div>
);
}4. 自定義API Hook
// hooks/useApi.js
import { useState, useCallback } from 'react';
import { api } from '../services/api';
export function useApi() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [data, setData] = useState(null);
const request = useCallback(async (config) => {
setLoading(true);
setError(null);
try {
const response = await api({
method: config.method || 'GET',
url: config.url,
data: config.data,
params: config.params
});
setData(response);
return response;
} catch (err) {
setError(err.response?.data?.message || err.message);
throw err;
} finally {
setLoading(false);
}
}, []);
const get = useCallback((url, params) =>
request({ method: 'GET', url, params }), [request]);
const post = useCallback((url, data) =>
request({ method: 'POST', url, data }), [request]);
const put = useCallback((url, data) =>
request({ method: 'PUT', url, data }), [request]);
const del = useCallback((url) =>
request({ method: 'DELETE', url }), [request]);
return {
loading,
error,
data,
request,
get,
post,
put,
delete: del,
setData,
setError,
clear: () => {
setError(null);
setData(null);
}
};
}
// 使用示例
function ApiHookExample() {
const {
loading,
error,
data: users,
get: fetchUsers,
post: createUser,
put: updateUser,
delete: deleteUser
} = useApi();
const handleFetch = async () => {
await fetchUsers('/users');
};
const handleCreate = async () => {
await createUser('/users', {
name: '新用戶',
email: 'new@example.com'
});
handleFetch(); // 重新獲取
};
if (loading) return <div>加載中...</div>;
if (error) return <div>錯誤: {error}</div>;
return (
<div>
<button onClick={handleFetch}>獲取用戶</button>
<button onClick={handleCreate}>創(chuàng)建用戶</button>
{users && (
<ul>
{users.map(user => (
<li key={user.id}>
{user.name}
<button onClick={() => deleteUser(`/users/${user.id}`)}>刪除</button>
</li>
))}
</ul>
)}
</div>
);
}二、路由（React Router）
1. 基礎路由配置
# 安裝React Router npm install react-router-dom
// App.jsx
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import { Home, About, Users, UserDetail, Dashboard, Settings, NotFound } from './pages';
function App() {
return (
<BrowserRouter>
<div className="app">
{/* 導航欄 */}
<nav>
<ul>
<li><Link to="/">首頁</Link></li>
<li><Link to="/about">關于</Link></li>
<li><Link to="/users">用戶</Link></li>
<li><Link to="/dashboard">儀表盤</Link></li>
</ul>
</nav>
{/* 路由配置 */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/users" element={<Users />} />
<Route path="/users/:id" element={<UserDetail />} />
<Route path="/dashboard/*" element={<DashboardLayout />} />
<Route path="*" element={<NotFound />} />
</Routes>
</div>
</BrowserRouter>
);
}
// 嵌套路由布局組件
function DashboardLayout() {
return (
<div className="dashboard-layout">
<aside>
<h3>儀表盤菜單</h3>
<ul>
<li><Link to="/dashboard">概覽</Link></li>
<li><Link to="/dashboard/settings">設置</Link></li>
<li><Link to="/dashboard/analytics">分析</Link></li>
</ul>
</aside>
<main>
<Routes>
<Route index element={<Dashboard />} />
<Route path="settings" element={<Settings />} />
<Route path="analytics" element={<Analytics />} />
</Routes>
</main>
</div>
);
}2. 動態(tài)路由與參數
// pages/UserDetail.jsx
import { useParams, useNavigate, useLocation, useSearchParams } from 'react-router-dom';
function UserDetail() {
// 獲取路由參數
const { id } = useParams();
// 編程式導航
const navigate = useNavigate();
// 獲取location對象
const location = useLocation();
// 獲取查詢參數
const [searchParams, setSearchParams] = useSearchParams();
const tab = searchParams.get('tab') || 'info';
const page = searchParams.get('page') || '1';
const handleEdit = () => {
// 導航到編輯頁面
navigate(`/users/${id}/edit`, {
state: { from: location.pathname }, // 傳遞狀態(tài)
replace: false // 替換當前記錄
});
};
const handleGoBack = () => {
// 返回上一頁
navigate(-1);
};
const changeTab = (tabName) => {
// 更新查詢參數
setSearchParams({ tab: tabName, page });
};
return (
<div>
<h1>用戶詳情 ID: {id}</h1>
<div>
<button onClick={handleEdit}>編輯用戶</button>
<button onClick={handleGoBack}>返回</button>
</div>
{/* Tab切換 */}
<div>
<button onClick={() => changeTab('info')}>基本信息</button>
<button onClick={() => changeTab('posts')}>帖子</button>
<button onClick={() => changeTab('comments')}>評論</button>
</div>
{/* 根據tab顯示不同內容 */}
{tab === 'info' && <UserInfo userId={id} />}
{tab === 'posts' && <UserPosts userId={id} />}
{tab === 'comments' && <UserComments userId={id} />}
</div>
);
}3. 路由守衛(wèi)（認證保護）
// components/PrivateRoute.jsx
import { Navigate, useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';
function PrivateRoute({ children, roles = [] }) {
const { isAuthenticated, user, loading } = useAuth();
const location = useLocation();
if (loading) {
return <div>檢查權限...</div>;
}
if (!isAuthenticated) {
// 未登錄，重定向到登錄頁
return <Navigate to="/login" state={{ from: location }} replace />;
}
if (roles.length > 0 && !roles.includes(user.role)) {
// 無權限，重定向到無權限頁面
return <Navigate to="/unauthorized" replace />;
}
return children;
}
// 使用示例
function AppRoutes() {
return (
<Routes>
{/* 公開路由 */}
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
{/* 需要登錄的路由 */}
<Route path="/dashboard" element={
<PrivateRoute>
<Dashboard />
</PrivateRoute>
} />
{/* 需要管理員權限的路由 */}
<Route path="/admin" element={
<PrivateRoute roles={['admin', 'superadmin']}>
<AdminPanel />
</PrivateRoute>
} />
{/* 404頁面 */}
<Route path="*" element={<NotFound />} />
</Routes>
);
}4. 懶加載路由
import { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';
// 懶加載組件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));
const Users = lazy(() => import('./pages/Users'));
const UserDetail = lazy(() => import('./pages/UserDetail'));
// 加載中組件
const Loading = () => <div>加載中...</div>;
function App() {
return (
<BrowserRouter>
<Suspense fallback={<Loading />}>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/users" element={<Users />} />
<Route path="/users/:id" element={<UserDetail />} />
</Routes>
</Suspense>
</BrowserRouter>
);
}5. 路由配置集中管理
// routes/index.js
import { lazy } from 'react';
// 懶加載頁面組件
const Home = lazy(() => import('../pages/Home'));
const About = lazy(() => import('../pages/About'));
const Users = lazy(() => import('../pages/Users'));
const UserDetail = lazy(() => import('../pages/UserDetail'));
const Login = lazy(() => import('../pages/Login'));
const Dashboard = lazy(() => import('../pages/Dashboard'));
const Admin = lazy(() => import('../pages/Admin'));
const NotFound = lazy(() => import('../pages/NotFound'));
// 路由配置
export const routes = [
{
path: '/',
element: <Home />,
meta: {
title: '首頁',
requiresAuth: false
}
},
{
path: '/about',
element: <About />,
meta: {
title: '關于我們',
requiresAuth: false
}
},
{
path: '/login',
element: <Login />,
meta: {
title: '登錄',
requiresAuth: false
}
},
{
path: '/users',
element: <Users />,
meta: {
title: '用戶列表',
requiresAuth: true
}
},
{
path: '/users/:id',
element: <UserDetail />,
meta: {
title: '用戶詳情',
requiresAuth: true
}
},
{
path: '/dashboard',
element: <Dashboard />,
meta: {
title: '儀表盤',
requiresAuth: true,
roles: ['user', 'admin']
}
},
{
path: '/admin',
element: <Admin />,
meta: {
title: '管理后臺',
requiresAuth: true,
roles: ['admin']
}
},
{
path: '*',
element: <NotFound />,
meta: {
title: '頁面不存在',
requiresAuth: false
}
}
];
// 路由渲染組件
export function renderRoutes(routes) {
return (
<Routes>
{routes.map((route, index) => (
<Route
key={index}
path={route.path}
element={
<RouteGuard
element={route.element}
requiresAuth={route.meta?.requiresAuth}
roles={route.meta?.roles}
/>
}
/>
))}
</Routes>
);
}三、完整實戰(zhàn)：博客系統(tǒng)
// App.jsx
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import Layout from './components/Layout';
import Home from './pages/Home';
import Posts from './pages/Posts';
import PostDetail from './pages/PostDetail';
import CreatePost from './pages/CreatePost';
import EditPost from './pages/EditPost';
import Login from './pages/Login';
import Register from './pages/Register';
import Profile from './pages/Profile';
import Admin from './pages/Admin';
import NotFound from './pages/NotFound';
import { AuthProvider } from './contexts/AuthContext';
import PrivateRoute from './components/PrivateRoute';
// 創(chuàng)建React Query客戶端
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 5 * 60 * 1000, // 5分鐘
cacheTime: 10 * 60 * 1000, // 10分鐘
retry: 2,
refetchOnWindowFocus: false,
},
},
});
function App() {
return (
<QueryClientProvider client={queryClient}>
<AuthProvider>
<BrowserRouter>
<Routes>
{/* 公開路由 */}
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
{/* 需要布局的受保護路由 */}
<Route element={<PrivateRoute><Layout /></PrivateRoute>}>
<Route path="/" element={<Home />} />
<Route path="/posts" element={<Posts />} />
<Route path="/posts/:id" element={<PostDetail />} />
<Route path="/posts/create" element={
<PrivateRoute roles={['admin', 'author']}>
<CreatePost />
</PrivateRoute>
} />
<Route path="/posts/:id/edit" element={
<PrivateRoute roles={['admin', 'author']}>
<EditPost />
</PrivateRoute>
} />
<Route path="/profile" element={<Profile />} />
<Route path="/admin" element={
<PrivateRoute roles={['admin']}>
<Admin />
</PrivateRoute>
} />
</Route>
{/* 404 */}
<Route path="*" element={<NotFound />} />
</Routes>
</BrowserRouter>
</AuthProvider>
{/* 開發(fā)工具 */}
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
}// pages/Posts.jsx
import { useQuery } from '@tanstack/react-query';
import { Link, useSearchParams } from 'react-router-dom';
import { api } from '../services/api';
import Pagination from '../components/Pagination';
import Loading from '../components/Loading';
import Error from '../components/Error';
function Posts() {
const [searchParams, setSearchParams] = useSearchParams();
const page = parseInt(searchParams.get('page') || '1');
const limit = parseInt(searchParams.get('limit') || '10');
const search = searchParams.get('search') || '';
const { data, isLoading, error, isError } = useQuery({
queryKey: ['posts', { page, limit, search }],
queryFn: () =>
api.get('/posts', {
params: {
_page: page,
_limit: limit,
q: search
}
}),
});
const handleSearch = (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const searchValue = formData.get('search');
setSearchParams({ page: '1', search: searchValue });
};
if (isLoading) return <Loading />;
if (isError) return <Error message={error.message} />;
return (
<div className="posts-page">
<div className="page-header">
<h1>文章列表</h1>
<Link to="/posts/create" className="btn btn-primary">
新建文章
</Link>
</div>
{/* 搜索 */}
<form onSubmit={handleSearch} className="search-form">
<input
type="text"
name="search"
defaultValue={search}
placeholder="搜索文章..."
/>
<button type="submit">搜索</button>
</form>
{/* 文章列表 */}
<div className="posts-list">
{data?.map(post => (
<div key={post.id} className="post-card">
<h3>
<Link to={`/posts/${post.id}`}>{post.title}</Link>
</h3>
<p>{post.body.substring(0, 100)}...</p>
<div className="post-meta">
<span>作者: {post.author?.name || '未知'}</span>
<span>日期: {new Date(post.createdAt).toLocaleDateString()}</span>
<span>閱讀: {post.views || 0}</span>
</div>
<div className="post-actions">
<Link to={`/posts/${post.id}`} className="btn btn-sm btn-info">
查看
</Link>
<Link to={`/posts/${post.id}/edit`} className="btn btn-sm btn-warning">
編輯
</Link>
</div>
</div>
))}
</div>
{/* 分頁 */}
{data?.length > 0 && (
<Pagination
currentPage={page}
totalPages={Math.ceil(data.total / limit)}
onPageChange={(newPage) =>
setSearchParams({ page: newPage.toString(), search })
}
/>
)}
</div>
);
}// pages/PostDetail.jsx
import { useParams, useNavigate } from 'react-router-dom';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { api } from '../services/api';
import { useAuth } from '../contexts/AuthContext';
import Loading from '../components/Loading';
import Error from '../components/Error';
function PostDetail() {
const { id } = useParams();
const navigate = useNavigate();
const queryClient = useQueryClient();
const { user } = useAuth();
// 獲取文章詳情
const { data: post, isLoading, isError, error } = useQuery({
queryKey: ['post', id],
queryFn: () => api.get(`/posts/${id}`),
});
// 獲取評論
const { data: comments } = useQuery({
queryKey: ['comments', id],
queryFn: () => api.get(`/posts/${id}/comments`),
});
// 刪除文章
const deleteMutation = useMutation({
mutationFn: () => api.delete(`/posts/${id}`),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['posts'] });
navigate('/posts');
}
});
// 添加評論
const addCommentMutation = useMutation({
mutationFn: (comment) => api.post(`/posts/${id}/comments`, comment),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['comments', id] });
}
});
const handleAddComment = async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const content = formData.get('content');
if (!content.trim()) return;
await addCommentMutation.mutate({
content,
authorId: user.id,
createdAt: new Date().toISOString()
});
e.target.reset();
};
if (isLoading) return <Loading />;
if (isError) return <Error message={error.message} />;
if (!post) return <div>文章不存在</div>;
const canEdit = user && (user.role === 'admin' || post.authorId === user.id);
return (
<div className="post-detail">
<article>
<h1>{post.title}</h1>
<div className="post-meta">
<span>作者: {post.author?.name}</span>
<span>發(fā)布日期: {new Date(post.createdAt).toLocaleDateString()}</span>
<span>閱讀量: {post.views}</span>
</div>
<div className="post-content">
{post.content}
</div>
{/* 操作按鈕 */}
<div className="post-actions">
{canEdit && (
<>
<button
className="btn btn-primary"
onClick={() => navigate(`/posts/${id}/edit`)}
>
編輯
</button>
<button
className="btn btn-danger"
onClick={() => {
if (window.confirm('確定要刪除這篇文章嗎？')) {
deleteMutation.mutate();
}
}}
disabled={deleteMutation.isLoading}
>
{deleteMutation.isLoading ? '刪除中...' : '刪除'}
</button>
</>
)}
<button
className="btn btn-secondary"
onClick={() => navigate(-1)}
>
返回
</button>
</div>
</article>
{/* 評論區(qū)域 */}
<section className="comments">
<h3>評論 ({comments?.length || 0})</h3>
{/* 添加評論表單 */}
{user && (
<form onSubmit={handleAddComment} className="add-comment-form">
<textarea
name="content"
placeholder="寫下你的評論..."
rows="3"
required
/>
<button
type="submit"
disabled={addCommentMutation.isLoading}
>
{addCommentMutation.isLoading ? '提交中...' : '提交評論'}
</button>
</form>
)}
{/* 評論列表 */}
<div className="comments-list">
{comments?.map(comment => (
<div key={comment.id} className="comment">
<div className="comment-header">
<strong>{comment.author?.name}</strong>
<span>{new Date(comment.createdAt).toLocaleString()}</span>
</div>
<div className="comment-content">
{comment.content}
</div>
</div>
))}
</div>
</section>
</div>
);
}四、API和路由最佳實踐
1. 項目結構
src/
├── services/
│ ├── api.js # axios實例和配置
│ ├── auth.js # 認證相關API
│ ├── posts.js # 文章相關API
│ └── users.js # 用戶相關API
├── hooks/
│ ├── useApi.js # API自定義Hook
│ ├── useAuth.js # 認證Hook
│ └── useQuery.js # 查詢Hook
├── contexts/
│ └── AuthContext.js # 認證Context
├── pages/
│ ├── Home.jsx
│ ├── Posts.jsx
│ └── Profile.jsx
├── components/
│ ├── Layout/
│ ├── Loading/
│ └── Error/
├── routes/
│ └── index.js # 路由配置
└── utils/
└── constants.js2. API服務層示例
// services/api.js
import axios from 'axios';
// 創(chuàng)建axios實例
const api = axios.create({
baseURL: process.env.REACT_APP_API_URL || 'http://localhost:3000/api',
timeout: 10000,
headers: {
'Content-Type': 'application/json',
},
});
// 請求攔截器
api.interceptors.request.use(
(config) => {
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 響應攔截器
api.interceptors.response.use(
(response) => response.data,
(error) => {
if (error.response?.status === 401) {
// token過期，清除本地存儲
localStorage.removeItem('token');
localStorage.removeItem('user');
// 跳轉到登錄頁
window.location.href = '/login';
}
return Promise.reject(error.response?.data || error.message);
}
);
// 封裝常用方法
export const get = (url, params) => api.get(url, { params });
export const post = (url, data) => api.post(url, data);
export const put = (url, data) => api.put(url, data);
export const del = (url) => api.delete(url);
export const patch = (url, data) => api.patch(url, data);
export default api;五、常見問題解決
1. 跨域問題
// 開發(fā)環(huán)境代理配置 (vite.config.js)
export default {
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
}2. 請求取消
// 在組件卸載時取消請求
useEffect(() => {
const controller = new AbortController();
const fetchData = async () => {
try {
const response = await api.get('/data', {
signal: controller.signal
});
// 處理響應
} catch (err) {
if (err.name === 'AbortError') {
console.log('請求被取消');
} else {
// 處理其他錯誤
}
}
};
fetchData();
return () => {
controller.abort();
};
}, []);3. 路由權限控制
// 基于角色的權限控制
export const checkPermission = (userRole, allowedRoles) => {
if (!allowedRoles || allowedRoles.length === 0) return true;
if (!userRole) return false;
return allowedRoles.includes(userRole);
};關鍵要點
- API集成：
- 使用axios處理HTTP請求
- 使用React Query管理服務器狀態(tài)
- 封裝自定義Hook復用邏輯
- 統(tǒng)一錯誤處理和攔截器
- 路由管理：
- 使用React Router v6
- 實現路由守衛(wèi)保護頁面
- 使用懶加載優(yōu)化性能
- 合理組織路由結構
- 狀態(tài)同步：
- 服務器狀態(tài)用React Query
- 全局客戶端狀態(tài)用Context或Zustand
- 局部狀態(tài)用useState/useReducer
- 錯誤處理：
- 統(tǒng)一的錯誤邊界
- 友好的錯誤提示
- 請求重試機制
- 性能優(yōu)化：
- 組件懶加載
- 請求防抖/節(jié)流
- 緩存策略優(yōu)化
到此這篇關于React API集成與路由的最佳實踐的文章就介紹到這了,更多相關react api集成與路由內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了React中的不可變值的相關資料，幫助大家更好的理解和學習使用react.js，感興趣的朋友可以了解下2021-04-04
Vite+React搭建開發(fā)構建環(huán)境實踐記錄
這篇文章主要介紹了Vite+React搭建開發(fā)構建環(huán)境實踐,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
React Router提供了幾種不同的跳轉方式,包括使用組件進行頁面跳轉、使用組件進行重定向,以及使用編程式導航進行跳轉,這篇文章主要介紹了React中的頁面跳轉方式詳解,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了React中事件的類型定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要為大家介紹了React的diff算法核心復用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
React-Native之TextInput組件的設置以及如何獲取輸入框的內容
這篇文章主要介紹了React-Native之TextInput組件的設置以及如何獲取輸入框的內容問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
React函數組件useContext useReducer自定義hooks
這篇文章主要為大家介紹了React函數組件useContext useReducer自定義hooks示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了React如何接收excel文件下載導出功能封裝，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
再次談論React.js實現原生js拖拽效果引起的一系列問題
React 起源于 Facebook 的內部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設 Instagram 的網站.本文給大家介紹React.js實現原生js拖拽效果，需要的朋友一起學習吧2016-04-04![詳解react-webpack2-熱模塊替換[HMR]](http://img.jbzj.com/images/xgimg/bcimg9.png)
這篇文章主要介紹了詳解react-webpack2-熱模塊替換[HMR]， 小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08