Question

在我的路线中，我为特定路线设置了一个子弹，如下所示：

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

现在我去www.website.com/members/some-slug

我将尝试通过以下方式检测是否有a弹物：

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是子弹）：

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

这会导致重新路由，因此您可以在模式逐渐消失的同时在后台看到那些小的过渡（就像我第一次打开/member/slug一样）。

与模式关闭按钮相同，如果我单击它，我将执行的操作是：

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

重新渲染整个页面/member的页面，而不仅仅是关闭模式。我不能只使用this.setState({ showModal: false });，因为那不会将路由更改回/member。

有没有办法解决这个问题？还是采用另一种方法来使页面在更改URL时不重新呈现？

Answer 1

您可以像这样将模态包装在路线中。

模态

然后this.props.history.push（“ / path”）;

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

1 个答案: