Concepts

搜索参数

搜索参数用于使用查询字符串向路由传递数据。查询字符串是 URL 中 ? 字符后面的部分，用于向路由传递键值对。

在 Solid Router中，可以使用 useSearchParams 访问这些查询参数。这个原语返回一个元组，其中包含一个用于读取当前搜索参数的响应式对象和一个用于更新它们的函数。

import { useSearchParams } from "@solidjs/router";

export const App = () => {
  const [searchParams, setSearchParams] = useSearchParams();

  return (
    <div>
      <span>Username: {searchParams.username}</span>
      <input
        type="text"
        onChange={(e) => {
          e.preventDefault();
          setSearchParams({ username: e.target.value });
        }}
      />
    </div>
  );
};

getter（这个例子中是 searchParams）用于读取当前的搜索参数。setSearchParams 是 setter，接受一个对象，其条目将被合并到当前查询中。

多个查询

由于 setSearchParams 接受一个对象，你可以一次性传递多个键值对来更新多个搜索参数。

setSearchParams({
  username: "john",
  page: 1,
});

空值或 null 值

如果搜索参数的键值是 undefined、null 或空字符串（""），它将从查询字符串中移除。

访问查询字符串

如果你需要直接访问查询字符串，你可以使用 useLocation ：

import { useLocation } from "@solidjs/router";

export const App = () => {
  const location = useLocation();

  return (
    <div>
      <span>Query String: {location.search}</span>
    </div>
  );
};

如果URL是 http://localhost:3000/users?username=john&page=1，输出将是 Query String: ?username=john&page=1。

报告此页面问题