Question

我想在我的应用程序中向模型添加一个React Router链接。当我单击模式时，该ID不会立即显示在网址中。仅当我关闭模态ID后，模态ID才会显示在网址中。另外，当我在模式打开的情况下重新加载页面时，我希望模式仍保持打开状态，但如果刷新页面但模式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

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

反应路由器链接未显示

2 个答案: