如何在React Router v6的loader函数中访问查询参数/搜索参数

Question

我的路线配置如下：

const router = createBrowserRouter([
    {
      path: "/",
      element: <Layout />,
      children: [
        { index: true, element: <Home /> },
        { path: "contacts", element: <Contact /> },
        { path: "info/:link", element: <FooterLinks /> },
        { path: "faq", element: <FAQs /> },
        {
          path: "search",
          element: <SearchResults />,
          loader: async ({ params }) => {
            //NEED ACCESS TO QUERY PARAMETERS HERE
          },
        },
        {
          path: "disease/:id",
          element: <DiseaseDisplay />,
          loader: async ({ params }) => {
            ...
          },
        },
      ],
    },
  ]);

有没有办法访问loader函数中的路由中的查询参数？例如，如果路由是 localhost:3000/search?searchTerm=aaa，如何在加载器函数中访问 searchTerm 的值？预先感谢！

Answer 1

我相信会对你有帮助

{
          path: "search",
          element: <SearchResults />,
          loader: async ({ params, request }) => {
            const url = new URL(request.url);
            const searchTerm = url.searchParams.get("q");
            return searchProducts(searchTerm);
          },
},