Bootstrap 4 单页应用程序中的引导4卡

我有一个Blazor服务器端单页应用程序。在其中一个组件中，我有一个简单的bootstrap 4可折叠面板：

                    <a href="#demo" data-toggle="collapse">Collapsible</a>

                    <div id="demo" class="collapse">
                        Lorem ipsum dolor text....
                    </div>

Lorem ipsum dolor文本。。。。

当用户单击链接时，整个应用程序将刷新，而不是折叠（或打开）面板，因为url来自https://localhost:44333/mycurrentcomponent 变成https://localhost:44333/#demo.

---

如何使可折叠面板正常工作？

我只想跳过引导机制，其中可能包括未设置为在Blazor中使用的Javascript

在Blazor中做这种事情很简单：

<a @onclick="()=> IsCollapsed = !IsCollapsed" style="text-decoration:underline;color:navy;cursor:pointer">Collapsible</a>

@if (!IsCollapsed)
{
    <div id="demo">
        Lorem ipsum dolor text....
    </div>
}

@code {
    bool IsCollapsed;
}

可折叠
@如果（！已合并）
{
Lorem ipsum dolor文本。。。。
}
@代码{
布尔被折叠；
}

谢谢，好主意。