javascript - 如何在不重新渲染页面的情况下更新路线(打开/关闭具有自己路线的模态)？

Question

在我的 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 的详细信息)。

到目前为止，所有这些都很好。但是，问题是在我执行以下任一操作时重新呈现页面:

1. 打开模式
2. 关闭模式

我们为页面上的每个元素设置了过渡效果，因此如果您访问某个路线，这些元素将有一个微妙的淡入过渡效果。

当一个模式被点击时，我所做的是(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 时不会重新呈现？

Answer 1

你可以像这样在路由中包裹你的模式。

模态

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