在我的路由中,我已经为特定的路由设置了一个 slug,例如:
现在当我访问
发生的情况是,showModal会将Modal组件的状态更改为true(从而显示它),并触发一个API调用,以获取与传递的slug参数相关的详细信息(例如,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的详细信息)。到目前为止,所有这些都很好。但问题在于当我执行以下操作时页面重新渲染:
- 打开模态框
- 关闭模态框
当单击模态框时,我所做的是(
member.name
是slug):<Link
to={`/member/${member.name}`}
</Link>
这会导致重新路由,因此您可以在模态框淡入视图时看到背景中的小过渡效果(就好像我第一次打开/member/slug
一样)。
关闭模态框的按钮也是如此,如果我点击它,我所做的就是调用:
closeModal() {
this.props.history.push("/member");
}
如何避免整个页面重新渲染而不只是关闭模态框,在路由返回 /member
页面时不能仅使用 this.setState({ showModal: false });
。
有没有解决这个问题的方法?或者有其他方法可以在更改URL时避免页面重新渲染?