时间戳

首页 > 解决方案 > 使用浏览器后退按钮关闭多个嵌套的 Material UI 对话框 - reactjs

reactjs - 使用浏览器后退按钮关闭多个嵌套的 Material UI 对话框 - reactjs

问题描述

我想根据 URL 切换材质 ui 对话框的可见性。例如，当 URL 类似于这种 site.com/#UKLMCBUWPO模态时，一个是可见的，当site.com/#UKLMCBUWPO&KLMCnhjmWPO 模态二是可见的并且每次用户单击浏览器后退按钮时，URL 中的最后一个状态会弹出，第二个模态是隐藏的，依此类推。基本上用户可以与浏览器的后退和前进按钮交互以显示和隐藏对话框。我只希望在打开模式时 URL 中有一些乱码文本，并在它们关闭时删除这些乱码，直到页面上没有显示模式。

有任何想法吗 ？

标签： reactjsreact-routermaterial-uireact-router-dom

解决方案

您可以使用HashRouter配置路由器并props.location.hash获取哈希链接并将其拆分并获取数组中的最后一项。

工作演示

导航

     <Link
        className={
          "tab " + currentRoute.includes("about") ? "tab active" : "tab"
        }
        to="/modal#state=KLMCnhjmWPO"
      >
        Go to Modal 1
      </Link>
      <Link
        className={
          "tab " + currentRoute.includes("contact") ? "tab active" : "tab"
        }
        to={{
          pathname: "/modal",
          hash: "#state=KLMCnhjmWPO&#state=UKLMCBUWPO"
        }}
      >
        Go to Modal 2
      </Link>

路线

<HashRouter>
        <Nav />
        <Switch>
          <Route path="/home" exact component={Home} />
          <Route path="/modal" exact component={Modal} />
        </Switch>
      </HashRouter>

模态样例

const Modal = props => {
  const lastModal = props.location.hash.split("&");
  return <div>Modal - {lastModal[lastModal.length - 1]}</div>;
};

推荐阅读