Javascript 如何使链接在历史API中像真实的一样工作？

我正试图通过使用历史API实现普通JavaScript路由。我尝试使用这个方法history.pushState来更改我的URL，它可以正常工作并根据我的需要重命名我的URL，但当我刷新页面时它不起作用

此代码段示例使用firebase，但我认为如果不使用live server在本地运行它以生成localhost URL，它将无法正常工作：

---

// 单击链接时，JavaScript用于实现两件事：

该文档将被更改为不同的状态 新的URL被推送到历史记录中 JavaScript还可以防止链接加载整个新页面的正常行为发生

通过将URL推到历史记录中，实际上就是在声明URL代表您将页面转换为的文档

所以为了实现这一点，你需要让服务器，对于那个URL，提供一个HTML文档，它会给你那个状态

这意味着您需要：

为服务器中的每个URL生成处于最终状态的文档 从客户端JavaScript为每个URL生成最终状态的文档 您可以通过手工制作的静态页面，或者通过增加编程生成的静态页面或服务器端编程来实现这一点

是的，这往往需要相当多的工作。虽然pushState本身快速而简单，但如果没有围绕它做大量工作，它就没有多大用处

通过使用共享模板，或者围绕Next.JS等框架构建页面，可以减轻很多工作，Next.JS可以在服务器端呈现客户端代码

---

有些人喜欢为每个URL提供相同的HTML框架文档，并用JavaScript加载所有内容……但这对搜索引擎来说并不是一个好东西。

为了获得帮助，请提供一个最小的、可重复的示例。更多信息：@CptChix我添加了代码希望现在清楚谢谢。。。我对我的问题做了一些修改，以帮助理解我的所有观点