在我的 route ,我为特定路线设置了 slug,如下所示:
Main route: /members
Sub route: /members/:slug
现在当我访问 www.website.com/members/some-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 的详细信息)。
到目前为止,所有这些都很好。但是,问题是在我执行以下任一操作时重新呈现页面:
- 打开模式
- 关闭模式
我们为页面上的每个元素设置了过渡效果,因此如果您访问某个路线,这些元素将有一个微妙的淡入过渡效果。
当一个模式被点击时,我所做的是(member.name
是 slug):
<Link
to={`/member/${member.name}`}
</Link>
这会导致重新路由,因此您可以在模态淡出 View 时在背景中看到那些小的过渡(就像我第一次打开 /member/slug
一样)。
与模式关闭按钮相同,如果我点击它,我所做的是调用:
closeModal() {
this.props.history.push("/member");
}
重新呈现整个页面 /member
页面,而不仅仅是关闭模式。我不能只使用 this.setState({ showModal: false });
因为那样不会将路由更改回 /member
。
有办法解决吗?或者另一种方法可以让页面在更改 URL 时不会重新呈现?
最佳答案
你可以像这样在路由中包裹你的模式。
模态
然后this.props.history.push("/path");
关于javascript - 如何在不重新渲染页面的情况下更新路线(打开/关闭具有自己路线的模态)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52324222/