After the page is reloaded, the url created with useHistory push is deleted

Question

I have such a code, but the url is reset after the page is refreshed. Is there any solution to this? I want the page to reload after the url changes to " localhost:3000/?chain=ETH ", but after the reload the url is reset. so only "localhost:3000" remains. How can I prevent this?

  const handleClickEthereum = async () => {
    try {
      await handleNetworkSwitch("ethereum");
      navigate({
        pathname: "/",
        search: "?chain=ETH",
      });
      window.location.reload(false);
      setVisible(false);
    } catch (error) {
      console.log(error);
    }
  };

Maybe the whole code on the relevant page can help. I wanted to share the other codes on the page. All codes page

import React, { useState, useContext, useEffect } from "react";
import { Modal, Button } from "antd";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import BinanceCSS from "./modals.module.css";
import { useNavigate } from "react-router-dom";
import { useLocation } from "react-router-dom";
import { ReactSVG } from "react-svg";
import BinanceLogo from "../../assets/svg/binance.svg";
import PolygonLogo from "../../assets/svg/polygon.svg";
import EthereumLogo from "../../assets/svg/ethereum.svg";
//CONTEXT API
import BinanceContext from "../../context/BinanceContext";

const BinanceModal = () => {
  const { t } = useTranslation();

  const navigate = useNavigate();
  const location = useLocation();

  const [error, setError] = useState("hata var");

  const { visible, setVisible, handleNetworkSwitch, switchUrlState } =
    useContext(BinanceContext);

  const handleClickPolygon = async () => {
    try {
      await handleNetworkSwitch("polygon");
      navigate({
        pathname: "/",
        search: "?chain=Matic",
      });
      window.location.replace("/?chain=Matic");
      setVisible(false);
      console.log("sonuç", switchUrlState[0]);
    } catch (error) {
      console.log(error);
    }
  };

  const handleClickBinance = async () => {
    try {
      await handleNetworkSwitch("bsc");
      navigate({
        pathname: "/",
        search: "?chain=BSC",
      });
      window.location.replace("/?chain=BSC");
      setVisible(false);
    } catch (error) {
      console.log(error);
    }
  };

  const handleClickEthereum = async () => {
    try {
      await handleNetworkSwitch("ethereum");
      navigate({
        pathname: "/",
        search: "?chain=ETH",
      });

      setVisible(false);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <>
      <Modal
        title={t("binance_modal_title")}
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={800}
        footer={null}
      >
        <div className={BinanceCSS.modalContainer}>
          {/* -----BSC----- */}
          <Wrapper onClick={() => handleClickBinance()}>
            <ReactSVG className={BinanceCSS.binanceIcon} src={BinanceLogo} />
            <h2>{t("binance")}</h2>
          </Wrapper>
          {/* -----POLYGON----- */}
          <Wrapper onClick={() => handleClickPolygon()}>
            <ReactSVG className={BinanceCSS.polygonIcon} src={PolygonLogo} />
            <h2>{t("polygon")}</h2>
          </Wrapper>
          {/* -----ETHEREUM----- */}
          <Wrapper onClick={() => handleClickEthereum()}>
            <ReactSVG className={BinanceCSS.ethereumIcon} src={EthereumLogo} />
            <h2>{t("ethereum")}</h2>
          </Wrapper>
        </div>
      </Modal>
    </>
  );
};

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 12rem;
  height: 10rem;
  border-radius: 1.5rem;
  border: 1px solid #e2e2e2;
  cursor: pointer;
  padding-top: 1rem;
  transition: all 0.3s ease-in-out;
  margin-bottom: 2.5rem;
  &:hover {
    background: #ebeaea;
  }
`;

export default BinanceModal;

Answer 1

Hmm, can you share a little more code? How did you use the router etc? Which version of the package did you use? I put the same code in the random react app from my local machine and works perfectly, so looks that something else is wrong.

Answer 2

This code is navigating to http://localhost:3000/?chain=ETH and then reload the page. And url also not reset to http://localhost:3000

export default function Home() {
  const [visible, setVisible] = useState(true);
  const navigate = useNavigate();

  const handleClickEthereum = () => (e) => {
    navigate({
      pathname: "/",
      search: "?chain=ETH"
    });
    window.location.reload();
    setVisible(false);
  };
  return (
    <div>
      {JSON.stringify(visible)}
      <button onClick={handleClickEthereum()}>Click ETH</button>
    </div>
  );
}