当前位置：首页 > React

react路由组件如何发送请求

2026-01-25 11:25:08React

路由组件发送请求的方法

在React路由组件中发送请求通常涉及以下几个关键步骤：

使用useEffect钩子处理副作用 在函数组件中，可以利用useEffect钩子在组件挂载或路由参数变化时触发请求。例如：

import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function UserDetail() {
  const [user, setUser] = useState(null);
  const { userId } = useParams();

  useEffect(() => {
    fetch(`/api/users/${userId}`)
      .then(response => response.json())
      .then(data => setUser(data));
  }, [userId]); // 依赖项确保路由参数变化时重新请求
}

结合异步函数处理数据 推荐使用async/await语法简化异步请求逻辑：

useEffect(() => {
  async function loadData() {
    const response = await fetch(`/api/data/${id}`);
    const result = await response.json();
    setData(result);
  }
  loadData();
}, [id]);

集成Axios等HTTP库 对于复杂请求场景，可以配置Axios实例：

import axios from 'axios';

useEffect(() => {
  const cancelToken = axios.CancelToken.source();
  axios.get(`/api/items`, { cancelToken: cancelToken.token })
    .then(response => setItems(response.data))
    .catch(error => {
      if (!axios.isCancel(error)) console.error(error);
    });

  return () => cancelToken.cancel(); // 组件卸载时中止请求
}, []);

处理路由参数变化 当组件复用时（如仅路由参数变化），需要清除旧数据并显示加载状态：

const [loading, setLoading] = useState(true);
useEffect(() => {
  setLoading(true);
  fetchData().finally(() => setLoading(false));
}, [param]);

使用路由加载API React Router v6.4+提供了loader函数支持：

// 路由配置
const router = createBrowserRouter([
  {
    path: '/users/:id',
    element: <UserPage />,
    loader: async ({ params }) => {
      return fetch(`/api/users/${params.id}`);
    }
  }
]);

// 组件内通过useLoaderData获取
function UserPage() {
  const userData = useLoaderData();
}