为modal设置url查询

Question

我正在使用图像搜索和显示应用程序。用户可以单击照片，然后会弹出一个模式。那些模态将在 url 中有id。但是，当我刷新页面时，模式不存在并且显示错误。我从 unsplash api 获取 url，所以随着页面刷新重新加载，url 消失了。如何将 url 保留在 url 查询中，以便即使在页面刷新时 url 仍然存在？

网站

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

刷新页面时它不起作用的原因是您在导航时作为参数传递的photo 不再可用。但是，pathname 仍然可用（因为它是 URL 本身的一部分）

因此，在ModalWrapper 页面上，您可以检查photo 是否不存在，然后基于pathname 中可用的id 进行新的API 调用以获取photo。我从未使用过 unsplash API，但我认为应该是 this 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 或包装器或排序。这是更改后的codesandbox