如何在React Router v6的loader函数中获取查询参数

当然可以在loader函数中获取查询参数，React Router v6.4+ 的loader函数会接收一个包含request属性的参数，借助它就能解析URL中的查询参数。

针对你给出的路由配置，修改search路由的loader函数即可获取searchTerm的值：

{
  path: "search",
  element: <SearchResults />,
  loader: async ({ params, request }) => {
    // 解析当前请求的URL
    const url = new URL(request.url);
    // 获取名为searchTerm的查询参数值
    const searchTerm = url.searchParams.get("searchTerm");

    // 这里可以基于searchTerm执行数据请求等操作
    // 示例：
    // const response = await fetch(`/api/search?query=${searchTerm}`);
    // const data = await response.json();
    // return { data, searchTerm };

    return { searchTerm };
  },
},

额外说明 #

• 如果需要获取多个同名的查询参数（比如?tag=react&tag=router），可以使用url.searchParams.getAll("tag")，它会返回一个包含所有对应值的数组。
• 若要检查某个查询参数是否存在，可使用url.searchParams.has("searchTerm")，返回布尔值。

内容的提问来源于stack exchange，提问作者Quốc Huy Nguyễn