页面重新加载后，用useHistory push创建的url被删除答案

【问题标题】：After the page is reloaded, the url created with useHistory push is deleted页面重新加载后，用useHistory push创建的url被删除
【发布时间】：2022-07-19 23:23:14
【问题描述】：

我有这样的代码，但是页面刷新后url被重置了。有什么解决办法吗？我希望在 url 更改为“ localhost:3000/?chain=ETH ”后重新加载页面，但在重新加载后 url 会被重置。所以只剩下“localhost:3000”了。我怎样才能防止这种情况发生？

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

也许相关页面上的整个代码可以提供帮助。我想分享页面上的其他代码。 所有代码页面

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;

【问题讨论】：

标签： javascript reactjs blockchain web3js

【解决方案1】：

嗯，你能再分享一点代码吗？你是如何使用路由器等的？你用的是哪个版本的包？我将相同的代码放在本地机器上的随机反应应用程序中，并且运行良好，所以看起来还有其他问题。

【讨论】：

codesandbox.io/s/still-sound-lhjtf?file=/src/App.js 你好。我使用了上面提供帮助的朋友的示例，但是在此过程之后，代码将我重定向到主页。反正我无法理解。顺便说一句，我使用的是 react router v6 版本。
这个仓库是空的
对不起，我现在正在检查。
嗨。代码沙盒提出了一个问题。我无法分享链接，但我通过编辑分享了上面的相关代码。你能看看那里吗？
您共享的代码适用于任何随机应用。所以问题出在路由器的实现/配置上。如果不分享，我们将无法为您提供帮助。

【解决方案2】：

此代码正在导航到http://localhost:3000/?chain=ETH，然后重新加载页面。而且网址也不会重置为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>
  );
}

【讨论】：