ссылка на маршрутизатор не отображается

Question

Я хотел добавить ссылку реагирующего маршрутизатора на модальное окно в моем приложении. когда я нажимаю на модальное окно, идентификатор не отображается сразу в URL-адресе. Модальный идентификатор отображается в URL-адресе только после закрытия модального окна. Кроме того, когда я перезагружаю страницу с открытым модальным окном, я хочу, чтобы модальное окно оставалось открытым, но оно закрывается, если я обновляю sh страницу, но модальный идентификатор все еще находится в URL-адресе, поэтому это выглядит не очень хорошо. Любая помощь будет принята с благодарностью.

import React, { useState } from "react";
import Modal from "react-modal";
import { Link, BrowserRouter as Router } from "react-router-dom";
const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)"
  }
};

Modal.setAppElement("#root");
const ListItem = ({ photo }) => {
  console.log(photo.links.download_location);
  const downloadImage = () => {};
  const [modalIsOpen, setModalIsOpen] = useState(false);

  return (
    <>
      <Router>
        <div key={photo.id} className="grid__item card">
          <div className="card__body">
            <img
              src={photo.urls.small}
              alt=""
              onClick={() => setModalIsOpen(true)}
            />
          </div>
        </div>
        <Link to={`/${photo.id}`}>
          <Modal
            isOpen={modalIsOpen}
            onRequestClose={() => setModalIsOpen(false)}
            style={customStyles}
          >
            <img src={photo.urls.small} alt="" />
            <div>
              <button onClick={() => setModalIsOpen(false)} className="button">
                Close
              </button>
              <button onClick={downloadImage()}>Download</button>
            </div>
          </Modal>
        </Link>
      </Router>
    </>
  );
};
export default ListItem;

Answer 1

Редактировать damp-rain-8bqrp

Вам нужно обернуть каждое изображение компонентом Link. Затем создайте маршрут для рендеринга модального окна.

Answer 2

Для отображения модального окна после обновления страницы вам необходимо сохранить состояние isModalOpen в локальном хранилище браузера.