在 Modal Open 上更改路线 - React答案

【问题标题】：Change route on Modal Open - React在 Modal Open 上更改路线 - React
【发布时间】：2020-04-11 18:58:31
【问题描述】：

有没有办法在 React 中使用 react-router-dom 更改打开模式的路线。

我使用 react-modal 制作了模态，它的目的是近距离显示图像，所以我想用图像 ID 更新路由，这样我就可以使用 req. params.id 并获取图像和其他相关数据。

同样在模态关闭时，我想被重定向回画廊路线。

任何帮助将不胜感激，周末愉快！

【问题讨论】：

图库组件中是否已经加载了图片？
是的，先生！当我点击模态框时，我只是想将路线更改为当前图片 ID。

标签： reactjs routing react-router modal-dialog

【解决方案1】：

是的，你可以。例如，您的图库页面 (/gallery) 有很多图片，然后您点击某些图片。它必须用这样的链接包装：

<Link to={'/gallery/${image.id}`}>
  <img src={image.src} alt={image.alt} />
</Link>

在图库组件的最后你需要添加下一段代码

<Route
  path="/gallery/:id"
  children={({ match }) => {
    return (
      <Modal onClose={onClose} isOpened={Boolean(match)}>
        <ImageModalContent id={match && match.params.id} />
      </Modal>
    );
  }}
/>

主要技巧是使用属性子级。查看文档

有时您需要渲染路径是否与位置匹配或不是。在这些情况下，您可以使用功能 children 道具。有用与 render 完全一样，只是它被调用是否存在匹配与否。块引用

如果路径适用于当前 url，则 match 是包含图像 id 的对象，如果路径不适用于当前路径，则 match 为 null。你的情况就够了

在 componentDidMount 上的 ImageModalContent 中，您可以加载任何您想要的数据

您可以在此视频中找到更多详细信息

ZH: https://youtu.be/RYo3kwdDdBI 茹：https://youtu.be/4YHnZSMo9vo

【讨论】：

这是有效的，你能告诉我，如果我想从应用程序的任何地方显示注册模式，我该怎么做？我试过这个，但它完全改变了页面

【解决方案2】：

你可以在 click 函数上做一个使用重定向的方法，然后签入一个 useEffect 并将其推送到 url 让我解释一下：

const [ redirect, setRedirect ] = useState(null)

useEffect(() => {
    history.push(redirect)
}, [ redirect ];


<Button onClick={() => setRedirect(image.id)}>
    Image here
</Button>

可能有一些错误，但你明白吗？

【讨论】：