为模态设置 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() {&nbsp; const history = useHistory();&nbsp; const location = useLocation();&nbsp; const [photo, setPhoto] = useState(location.state);&nbsp; useEffect(() => {&nbsp; &nbsp; if (location.pathname && !location.state) {&nbsp; &nbsp; &nbsp; // call the new API here using pathname (photo ID) and setPhoto&nbsp; &nbsp; &nbsp; console.log(location.pathname);&nbsp; &nbsp; }&nbsp; }, [location]);&nbsp; function downloadImage() {}&nbsp; function close() {&nbsp; &nbsp; history.push("/");&nbsp; }&nbsp; return (&nbsp; &nbsp; !!photo && (&nbsp; &nbsp; &nbsp; <Modal isOpen={true} onRequestClose={close} style={customStyles}>&nbsp; &nbsp; &nbsp; &nbsp; <img src={photo.urls.small} alt="" />&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={close} className="button">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Close&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onClick={downloadImage()}>Download</button>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </Modal>&nbsp; &nbsp; )&nbsp; );}你还没有问过这个，但是，我也会把它移到Router外面Route，ListItem然后把它放在App.js里面（用路由器把所有东西都包起来）。保留它ListItem就像为每个列表项设置一个路由器和路由，这不是您理想中想要的。您可能希望在应用程序中保留一个路由器和路由，它通常属于App.js或包装器或分类器。这是经过此类更改后的代码和框