gpt4 book ai didi

reactjs - React Router V4 : How to render a modal in the same screen changing only the url and then with that url, 能够重建整个屏幕

转载 作者:行者123 更新时间:2023-12-03 13:31:16 27 4
gpt4 key购买 nike

我正在尝试构建一个行为类似于用于显示特定推文的模式的模式。

enter image description here

  1. 在该屏幕截图中,您可以看到每当模式打开时,状态代码都会附加到原始网址,但我仍保留在同一屏幕中。
  2. 然后,如果获取该网址并将其粘贴到浏览器的地址栏中,我在模式打开的情况下在后台加载相同的内容就像我复制网址时一样。

The react-router docs已经让我了解了第一部分,即在同一屏幕中加载模式。

这是codesandbox中的react-router示例

Edit  Modal Gallery-clone

问题是我不知道该怎么做才能让用户可以为显示模式时创建的网址添加书签(在示例中 /gallery/img/1 )

enter image description here然后基于该 url 能够在后台加载具有相同组件(Gallery 组件)的页面并打开模式。

附注在codesandbox的示例中,我故意省略了ModalSwitch组件中的一些路由。

最佳答案

也许您可以创建两条指向同一个图库组件的路由:gallery 和 gallery/img/:id。然后,在图库组件的 componentWillMount 期间,您可以检查 URL 是否包含 id 参数,并决定渲染模式以及要加载的图像。

然后,您可以为 UR 添加书签,可能会完全删除 ModalSwitch 组件,并且还允许在关闭模式时将用户重定向回库路径,从而始终保持 URL 准确。

关于reactjs - React Router V4 : How to render a modal in the same screen changing only the url and then with that url, 能够重建整个屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47621708/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com