为模态设置 url 查询

Question

我正在使用图像搜索和显示应用程序。用户可以点击一张照片，然后会弹出一个模式。这些模式将id在 url 中。但是，当我刷新页面时，模态不存在并显示错误。我从 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不存在，然后进行新的 API 调用以获取photo基于. 我从未使用过 unsplash API，但我认为应该是这个 API。idpathname

你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或包装器或分类器。这是经过此类更改后的代码和框