反应路由器链接未显示

Question

我想在我的应用程序中添加一个反应路由器链接到模态。当我单击模式时，ID 不会立即显示在 url 中。只有在我关闭模式后，模式 ID 才会显示在 url 中。此外，当我在打开模式的情况下重新加载页面时，我希望模式仍处于打开状态，但如果我刷新页面但模式 id 仍在 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

为了在刷新页面后显示模态，您需要将您的 isModalOpen 状态保存在浏览器本地存储中。

Answer 2

您需要使用 Link 组件包装每个图像。然后创建 Route 来渲染 Modal。