Открыть модальные по URL в React - PullRequest
0 голосов
/ 10 апреля 2020

На моей домашней странице , у меня есть модальная кнопка ( Демо ).

Как с помощью activ-router-dom можно открыть модал по 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>
    </>
  );
}

Я также создал простой счетчик, чтобы доказать, что домашняя страница не изменилась.

Если вы не понимаете мои проблемы, я объясню ясно :

Мне нужно открыть простой bootstrap модал с URL-адресом при помощи response-router-dom, и мне не нужно ничего менять на моей домашней странице. потому что когда я открываю модал со ссылкой, моя предыдущая страница исчезает.

Кроме того, когда я намекаю на кнопку закрытия, URL-адрес браузера должен измениться на предыдущее местоположение.

Редактировать в демоверсии: https://codesandbox.io/s/infallible-sinoussi-z6e3c

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...