На моей домашней странице , у меня есть модальная кнопка ( Демо ).
Как с помощью 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