我可以在不刪除組件 state React Router 的情況下刪除當前頁面的查詢參數嗎？

Question

我想從當前屏幕中刪除查詢參數?error=true ，然后我需要將該信息存儲在 state 中。 但是如果我使用 props.history.replace，我當前組件的 state 信息將會丟失。 有沒有辦法刪除查詢參數而不用反應路由器重新渲染

Answer 1

我沒有用 React 檢查這個，但我用 Angular 試過了，

您可以像這樣創建當前的 url 並刪除所需的查詢參數。 如果您的查詢參數多於參數error ，您可能需要獲取它們並動態刪除錯誤參數並將其添加到以下變量的末尾

const updatedUrl = window.location.protocol + "//" + window.location.host + window.location.pathname

現在你可以使用，

window.history.pushState({path:updatedUrl},'',updatedUrl);

更新這里我用 React 試過了

function useQuery() {
  return new URLSearchParams(useLocation().search); //useLocation from react-router-dom
}

export default function App() {
  const [err, setErr] = useState(null);

  let query = useQuery();

  useEffect(function() {
    setErr(query.get("error"));
    const updatedUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
    window.history.pushState({path:updatedUrl},'',updatedUrl);
  }, [query])

  return (
    <div className="App">
      <h1>error = {err}</h1>
    </div>
  );
}