原生JS单页应用history.pushState/replaceState问题求助

问题1：后退按钮只能回退一页的原因及修复 #

原因 #

每次触发popstate事件（点击后退/前进）时，你的load函数都会调用history.pushState，把当前页面再次添加到历史栈中，导致历史栈被重复条目污染。比如：

1. 首页 → 联系页 → 博客页，历史栈是[首页, 联系页, 博客页]
2. 点击后退到联系页，popstate触发load("contact")，执行pushState，历史栈变成[首页, 联系页, 联系页]
3. 再次点击后退，只会回到第二个联系页，无法返回首页

修复方案 #

给load函数添加一个参数标记是否是popstate触发的加载，只有**主动导航（点击链接）**时才调用pushState，popstate触发时不修改历史栈；同时初始加载时用replaceState替换默认条目，避免多余的历史记录。

问题2：错误URL留在历史记录的原因及修复 #

原因 #

你先调用history.replaceState保留了错误URL，然后直接跳转404页面，导致错误URL的历史条目被保留。跳转操作会在历史栈中添加404页面的条目，而错误URL仍在栈中。

修复方案 #

如果是SPA内渲染404，直接用replaceState替换当前错误URL为404路径；如果必须跳转外部404页面，先替换当前历史条目为404页面的URL，再执行跳转。

修改后的完整代码 #

HTML

<ul id="nav"></ul>
<div id="root"></div>

JavaScript

const routes = {
    "home": "Home",
    "blog": "Blog",
    "contact": "Contact"
};

for (const r in routes) {
    nav.innerHTML += `<li data-id="${r}">${routes[r]}</li>`;
}

const load = (page, isPopState = false) => {
    page = page.replace("#", "");
    nav.querySelector(".active")?.removeAttribute("class");

    if (routes[page]) {
        nav.querySelector(`[data-id="${page}"]`).className = "active";
        fetch("pages/" + page + ".html")
            .then(res => res.text())
            .then(res => root.innerHTML = res);
        document.title = routes[page];

        const targetUrl = `${location.pathname}#${page}`;
        // 仅主动导航时添加新历史条目，初始加载或回退时替换当前条目
        if (isPopState) {
            // 首次加载无hash时，替换初始条目为首页URL
            if (!location.hash) {
                history.replaceState(null, null, targetUrl);
            }
        } else {
            history.pushState(null, null, targetUrl);
        }
    } else {
        // 方案1：SPA内渲染404（推荐，保持SPA状态）
        root.innerHTML = `<h1>404 - 页面不存在</h1>`;
        document.title = "404 Not Found";
        // 替换当前错误URL为404路径，清除错误记录
        history.replaceState(null, null, `${location.pathname}#404`);

        // 方案2：跳转到外部404页面（如需）
        // history.replaceState(null, null, `${location.pathname}errors/404.html`);
        // location.href = "errors/404.html";
    }
};

nav.onclick = e => {
    if (e.target.tagName !== "LI") return;
    load(e.target.dataset.id);
};

window.onpopstate = () => {
    // 标记为回退触发的加载，不新增历史条目
    load(location.hash, true);
};

// 初始加载：有hash则加载对应页面，否则加载首页
const initialPage = location.hash || "home";
load(initialPage, !location.hash);

关键修改点说明 #

1. 历史栈控制：通过isPopState参数区分主动导航和回退操作，避免重复添加历史条目，保证回退流程正常。
2. 初始加载优化：首次无hash时用replaceState替换初始历史条目，避免出现空hash的无效历史记录。
3. 404历史处理：用replaceState直接覆盖错误URL的历史条目，确保用户回退时不会回到错误路径。

内容的提问来源于stack exchange，提问作者AbsoluteBeginner