在 Modal Open 上更改路线 - React

Question

有没有办法使用 react-router-dom.

更改在 React 中打开模式时的路由

我使用 react-modal 制作了模态，它意味着近距离显示图像，所以我想用图像 ID 更新路线，这样我就可以使用中的 ID 向我的服务器发送获取请求req.params.id 并获取图像和其他相关数据。

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

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

Answer 1

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

const [ redirect, setRedirect ] = useState(null)

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


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

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

Answer 2

是的，你可以。例如，您有包含大量图像的图库页面 (/gallery)，然后您单击某些图像。它必须像这样被 link 包裹起来：

<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。请参阅文档

Sometimes you need to render whether the path matches the location or not. In these cases, you can use the function children prop. It works exactly like render except that it gets called whether there is a match or not. Blockquote

如果路径适用于当前 url，则匹配为 object，其中包括图像 ID，如果路径不适用于当前路径，则匹配为空。够你用了case

在 ImageModalContent 中 componentDidMount 你可以加载你想要的任何数据

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

中文：https://youtu.be/RYo3kwdDdBI 俄罗斯：https://youtu.be/4YHnZSMo9vo

在 Modal Open 上更改路线 - React

Change route on Modal Open - React

reactjs

routing

react-router

modal-dialog