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

Question

我想根据 URL 切换 Material ui 对话框可见性。例如当 URL 是这样的site.com/#UKLMCBUWPO模式一可见，当 site.com/#UKLMCBUWPO&KLMCnhjmWPO模态两个是可见的，每次用户单击浏览器后退按钮时都会弹出 url 中的最后一个状态，第二个模态被隐藏，依此类推。
基本上用户可以与浏览器的后退和前进按钮交互以显示和隐藏对话框。
我只想在模态打开时 URL 中出现一些乱码，并在关闭时移除乱码，直到页面上没有显示模态。
有任何想法吗 ？

Answer 1

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

     <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>

sample 模态

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