如何在不重新渲染页面的情况下更新路由（打开/关闭具有其自己路由的模态框）？

Question

在我的路由中，我已经为特定的路由设置了一个 slug，例如：

Main route: /members
Sub route: /members/:slug

现在当我访问 www.website.com/members/some-slug 时， 我会尝试通过以下方法检测是否存在 slug：

if (this.props.match.params.slug) {
   // If have slug, open a modal window with data that corresponds to that slug
   this.showModal(this.props.match.params.slug);
}

发生的情况是，showModal会将Modal组件的状态更改为true（从而显示它），并触发一个API调用，以获取与传递的slug参数相关的详细信息（例如，slug sarah-smith 用作GET请求的参数，以获取Sarah Smith的详细信息）。

到目前为止，所有这些都很好。但问题在于当我执行以下操作时页面重新渲染：

1. 打开模态框
2. 关闭模态框

我们对页面上的每个元素都有过渡效果，因此如果您访问一个路由，则元素将具有微妙的淡入转换效果。

当单击模态框时，我所做的是（member.name 是slug）：

<Link
    to={`/member/${member.name}`}
</Link>

这会导致重新路由，因此您可以在模态框淡入视图时看到背景中的小过渡效果(就好像我第一次打开/member/slug一样)。

关闭模态框的按钮也是如此，如果我点击它，我所做的就是调用：

closeModal() {
    this.props.history.push("/member");
}

如何避免整个页面重新渲染而不只是关闭模态框，在路由返回 /member 页面时不能仅使用 this.setState({ showModal: false });。

有没有解决这个问题的方法？或者有其他方法可以在更改URL时避免页面重新渲染？

- catandmouse

---

你能在sandbox.io或codepen.io上重现这个吗？ - Joshua

Answer 1

你可以像这样在路由中包装你的模态框。

模态框

然后使用 this.props.history.push("/path");

- Anil Kumar

Answer 2

我认为 React-Router 文档已经有这样的示例了。您可以查看以下链接：

https://reacttraining.com/react-router/web/example/modal-gallery。

同时也有一个 npm 模块可用，链接在这里：https://github.com/davidmfoley/react-router-modal

- Sandip Nirmal