反應路由器 v6 中的查詢字符串

Question

我在我的 URL 中顯示了兩個查詢字符串，就像這樣**localhost3000/?filter=all&search=something**但問題是當沒有任何內容可供搜索時，我的 URL 仍然顯示**localhost3000/?filter=all&search=**而如果它使用，我想顯示搜索，當沒有搜索時它顯示**localhost3000/?filter=all**這是我的代碼：

  replaceUrl = () => {
    const x = {
      filter: this.state.filter,
      search: this.state.searchterm,
    };
    const y = queryString.stringify(x);
    this.props.navigate(`?${y}`);
  };

過濾器更改或搜索時調用replaceUrl

Answer 1

如果this.state.searchterm存在，只需設置search字段

replaceUrl = () => {
    const x = {
      filter: this.state.filter,
    };

    if (this.state.searchterm) x.search = this.state.searchterm;

    const y = queryString.stringify(x);

    this.props.navigate(`?${y}`);
  };

Answer 2

由於您使用的是 class 組件，我假設您將其包裝在 function 組件中以將navigate function 注入道具中沒有問題。 react-router-dom v6 有一個useSearchParams掛鈎，專門用於處理 URL 查詢字符串。

筆記：

setSearchParams function 的工作方式與navigate類似，但僅適用於 URL 的搜索部分。

const [searchParams, setSearchParams] = useSearchParams();

將searchParams和setSearchParams傳遞給您的 class 組件並通過道具訪問。

replaceUrl = () => {
  const { filter, searchterm } = this.state;
  const { searchParams, setSearchParams } = this.props;

  if (filter) {
    searchParams.set("filter", filter);
  }
  if (searchterm) {
    searchParams.set("search", searchterm);
  }

  setSearchParams(searchParams);
};