установка запроса URL для модального

Question

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

Lisitem

import React, { useState } from "react";
import { Link, BrowserRouter as Router, Route } from "react-router-dom";
import ModalWrapper from "./ModalWrapper";

const ListItem = ({ photo }) => {
  return (
    <>
      <Router>
        <div key={photo.id} className="grid__item card">
          <div className="card__body">
            <Link to={{ pathname: `/${photo.id}`, state: photo }}>
              <img src={photo.urls.small} alt="" />
            </Link>
            <Route path="/:photoId" component={ModalWrapper} />
          </div>
        </div>
      </Router>
    </>
  );
};
export default ListItem;

Модальная оболочка

import React from "react";
import Modal from "react-modal";
import { useHistory, useLocation } from "react-router-dom";

const customStyles = {
  content: {
    top: "50%",
    left: "50%",
    right: "auto",
    bottom: "auto",
    marginRight: "-50%",
    transform: "translate(-50%, -50%)"
  }
};

Modal.setAppElement("#root");

function ModalWrapper() {
  const history = useHistory();
  const location = useLocation();

  const photo = location.state;

  function downloadImage() {}

  function close() {
    history.push("/");
  }

  return (
    <Modal isOpen={true} onRequestClose={close} style={customStyles}>
      <img src={photo.urls.small} alt="" />

      <div>
        <button onClick={close} className="button">
          Close
        </button>
        <button onClick={downloadImage()}>Download</button>
      </div>
    </Modal>
  );
}

export default ModalWrapper;

Answer 1

Причина, по которой это не работает, когда вы обновляете sh страницу, заключается в том, что photo, который вы передали в качестве параметра во время навигации, больше не доступен. Но pathname - это то, что все еще доступно (потому что это часть самого URL-адреса)

Итак, на странице ModalWrapper вы можете проверить, отсутствует ли photo, а затем выполнить новый вызов API чтобы получить photo на основе id, доступного в pathname. Я никогда не использовал unspla sh API, но думаю, что это будет этот API .

Ваш ModalWrapper будет выглядеть так

function ModalWrapper() {
  const history = useHistory();
  const location = useLocation();
  const [photo, setPhoto] = useState(location.state);

  useEffect(() => {
    if (location.pathname && !location.state) {
      // call the new API here using pathname (photo ID) and setPhoto
      console.log(location.pathname);
    }
  }, [location]);

  function downloadImage() {}

  function close() {
    history.push("/");
  }

  return (
    !!photo && (
      <Modal isOpen={true} onRequestClose={close} style={customStyles}>
        <img src={photo.urls.small} alt="" />

        <div>
          <button onClick={close} className="button">
            Close
          </button>
          <button onClick={downloadImage()}>Download</button>
        </div>
      </Modal>
    )
  );
}

Вы не спрашивали об этом, но я бы также переместил Router и Route за пределы ListItem и оставил бы их в App.js (обернув все внутри маршрутизатором). Хранить его в ListItem - все равно что иметь маршрутизатор и маршрут для каждого элемента списка, а это не то, что вы в идеале хотели бы. Вы хотели бы сохранить один маршрутизатор и маршрут через приложение, и он обычно принадлежит App.js, оболочке или сортировкам. Вот коды и ящик после таких изменений