如何在不重新加载页面的情况下更改浏览器 URL？

Question

I'm using react routers and to change the URL I'm doing history.push(pathname), But it is reloading entire page. I don't want to refresh or reload the page, I tried with replace and replacestate still page is reloading could anyone suggest me the solution?

 history.push(
        `/dashboard/filter?studyName=${JSON.stringify(study_dashboard_new)?JSON.stringify(study_dashboard_new):JSON.stringify([])}&compoundName=${JSON.stringify(compound_dashboard_new)?JSON.stringify(compound_dashboard_new):JSON.stringify([])}`
    );

Thanks

Answer 1

You should use history from the react-router-dom 's useHistory hook.

import { useHistory } from "react-router-dom";

function HomeButton() {
  const history = useHistory();

  function handleClick() {
    history.push("/home");
  }

  return (
    <button type="button" onClick={handleClick}>
      Go home
    </button>
  );
}