Javascript 反应路由器链接未显示

我想在我的应用程序中为模式添加react路由器链接。当我单击模式时，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;

import React，{useState}来自“React”；
从“反应模态”导入模态；
从“react Router dom”导入{Link，BrowserRouter as Router}；
常量自定义样式={
内容：{
顶部：“50%”，
左：“50%”，
右：“自动”，
底部：“自动”，
利润率：“-50%”，
转换：“翻译（-50%，-50%）”
}
};
Modal.setAppElement（“#根”）；
常量ListItem=（{photo}）=>{
console.log（photo.links.download_位置）；
const downloadImage=（）=>{}；
const[modalIsOpen，setModalIsOpen]=使用状态（false）；
返回(
setModalIsOpen（真）}
/>
setModalIsOpen（假）}
样式={customStyles}
>
setModalIsOpen（false）}className=“button”>
接近
下载
);
};
导出默认列表项；

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

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

您需要使用链接组件包装每个图像。然后创建路线以渲染模式。

---

您需要使用链接组件包装每个图像。然后创建路由以呈现模式。

我不知道如何使用localstorage。你能在我的沙箱里教我怎么做吗？我不认为你需要使用localstorage我不知道如何使用localstorage。你能在我的沙箱里教我怎么做吗？我不认为你需要使用localStorageTry这个@Yusufbek，它看起来不像我要做的，try这个@Yusufbek，它看起来不像我要做的。这个解决方案最接近我想要的结果。但有一个问题是，当我使用打开的模式刷新时，出现了一个错误。如何消除这个错误？它说，

photo未定义

您必须使用上下文或根据模式包装器中URL中提供的id重新蚀刻照片，以获得所需的结果。目前，

photo

可通过位置的状态属性获得。这是可能的，但您不应该使用位置状态来获取单击的照片。你需要做的是根据模式中给定的id重新蚀刻照片。查看链接组件的

到
道具。哇，这个解决方案最接近我想要的结果。但有一个问题是，当我使用打开的模式刷新时，出现了一个错误。如何消除这个错误？它说，
photo未定义
您必须使用上下文或根据模式包装器中URL中提供的id重新蚀刻照片，以获得所需的结果。目前，
photo
可通过位置的状态属性获得。这是可能的，但您不应该使用位置状态来获取单击的照片。您需要做的是根据模式中给定的id重新蚀刻照片。查看链接组件的
到
道具。