REACTJS：根据React中的路由路径更改加载器API URL

Question

要重用以相同格式加载不同数据的组件，相同的元素会呈现在不同的路径中。如何根据 EmpPage.js 中的路由路径更改 url

App.js：

    {
    path: "emp-detail",
    element: <EmpRootLayout />,
    children: [
      {
        index: true,
        element: <EmpPage />,
        loader: empListLoader,
      },
      {
        path: "retired",
        element: <EmpPage  />,
        loader: empListLoader,
      },
      {
        path: "resigned",
        element: <EmpPage />,
        loader: empListLoader,
      },
    ],

EmpPage.js

async function loadEmpRequests() {
  // change url based on route path
  let url = "http://localhost:8000/empData";
  const response = await fetch(url, {
    method: "GET",
  });

  const resData = await response.json();
  return resData.data;
  
}

export function loader() {
  return defer({
    empRequests: loadEmpRequests(),
  });
}

Answer 1

你这里似乎有很多代码重复。我建议使用可以在加载器函数中读取的动态路由参数来渲染单个路由。

示例：

{
  path: "emp-detail",
  element: <EmpRootLayout />,
  children: [
    {
      path: "page?",
      element: <EmpPage />,
      loader: empListLoader,
    },
  ],
}

async function loadEmpRequests({ params }) {
  const { page } = params;

  // change url based on route path parameter
  let url = "";
  switch(page) {
    case "retired":
      url = ".....";
      break;

    case "resigned":
      url = ".....";
      break;

    default:
      url = ".....";
      break;

  }
  
  const response = await fetch(url, {
    method: "GET",
  });

  const { data } = await response.json();
  return data;
}

另一种方法可能是让加载器成为柯里化函数，并且 URL 可以作为参数传入。

示例：

{
  path: "emp-detail",
  element: <EmpRootLayout />,
  children: [
    {
      index: true,
      element: <EmpPage />,
      loader: empListLoader("...."),
    },
    {
      path: "retired",
      element: <EmpPage  />,
      loader: empListLoader("...."),
    },
    {
      path: "resigned",
      element: <EmpPage />,
      loader: empListLoader("...."),
    },
  ],
}

function loadEmpRequests(url) {
  return async function() {
    const response = await fetch(url, {
      method: "GET",
    });

    const { data } = await response.json();
    return data;
  }
}