如何擺脫查詢字符串

Question

解決了

我有一個有點愚蠢的問題。 我無法擺脫查詢字符串。 一旦我將它放入歷史記錄，我就找不到如何刪除它。

我有一個帶有導航功能的 React 應用程序（通用路由器）。 我不認為它與我使用的庫有關，而是與 URL 和歷史記錄 API 的錯誤使用有關。

我有一個用戶列表，每個用戶都有一個編號。 我有一個輸入表格來輸入號碼。 我將 append 作為/users?nb=1形式的查詢字符串。 這個 url 被提交給一個在路徑數組中搜索的解析器。 與/users路徑對應的操作代碼有一個 function，它讀取是否存在查詢字符串。 如果是，提取號碼並推送新路徑/users/1 。 這幾乎可行：我實際上推/users/1?nb=1 ..

注意：我當然可以直接推送/users/1而無需查詢字符串，但這是一個練習。

有什么訣竅？？ [編輯]：覆蓋鍵search:""

編輯： https://codesandbox.io/s/universal-router-mobx-demo-jg3um?file=/src/NavBar.js

1- 發出 function，創建查詢字符串

function handleSubmit(e) {
    e.preventDefault();
    let query = Object.fromEntries(new FormData(e.currentTarget));
    const {pathname, search} = window.location 
    const qstring = new URLSearchParams(search);
    for (const k in query){ qstring.append(k, query[k])};
    history.push({ pathname, search: "?" + qstring });
  }

1b - 與“正常”鏈接相比

const handleClick = (e) => {
    e.preventDefault();
    history.push({ pathname: e.target.pathname });
  };

2- 條件路徑（用於查詢字符串）

const searchString = new URLSearchParams(window.location.search);
const id = searchString.get("nb");
if (id) { return { redirect: `/users/${id}` } }

3-解決

const page = await router.resolve({ pathname: location.pathname });
if (page.redirect) {
    return history.push({ pathname: page.redirect, search: "" });
 }                                                  ^^^!
return render(<React.StrictMode>{page}</React.StrictMode>, root);

pb 通過添加search:""來解決，它刪除了尾隨的查詢字符串。

Answer 1

因此，正如@Ouroborus 所示，您只需要在解析器返回的 url 中添加search:''即可覆蓋之前的查詢字符串：

history.push({pathname: page.redirect, search:""})