javascript - 在 React 中通过 URL 打开 Modal

Question

在我的主页中，我有一个模式按钮（演示）。

使用 react-router-dom，如何在不更改上一页中的 ui 的情况下通过 url 打开模式？

应用程序.js：

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import { Modal } from "react-bootstrap";

export default function App() {
  return (
    <Router>
      <div>
        <h2>Click on Home</h2>
        <ul>
          <li>
            <Link to="/home">Home</Link>
          </li>
        </ul>
        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

class Child extends React.Component {
  componentDidMount() {
    var x = document.getElementById("counter");
    var counter = 1;
    setInterval(function() {
      counter++;
      x.innerHTML = counter;
    }, 1000);
  }
  render() {
    return (
      <>
        <div id="counter">0</div>
        <ShowModal />
      </>
    );
  }
}

function ShowModal() {
  const [show, setShow] = React.useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <div className="d-buttons">
        <Link
          to="/open-modal"
          class="btn btn-danger border-0 mt-1"
          onClick={handleShow}
        >
          Show Modal
        </Link>
      </div>
      <Modal
        size="lg"
        show={show}
        onHide={handleClose}
        aria-labelledby="my-lg-modal"
      >
        <Modal.Header closeButton>
          <Modal.Title id="my-lg-modal">Modal</Modal.Title>
        </Modal.Header>
        <Modal.Body>Example Content</Modal.Body>
      </Modal>
    </>
  );
}

我还创建了一个简单的计数器来证明主页没有改变。

如果你不明白我的问题，我会解释清楚：

我需要使用 react-router-dom 打开带有 url 的简单引导模式，并且不需要更改主页中的任何内容。因为当我打开带有链接的模式时，我的上一页将消失。

此外，当我提示关闭按钮时，浏览器 url 必须更改为以前的位置。

编辑演示： https ://codesandbox.io/s/infallible-sinoussi-z6e3c

标签： javascriptreactjsreact-router