你懂的，咱就是说SPA路由，这玩意儿，当年还真有点儿“惊天动地”的感觉。你打开一个页面加载完之后一切就绪，不需要再加载新的资源了。是不是hen棒？ 感觉像个小精灵，瞬间把整个页面dou装进内存里了。

但啊，事情可没那么简单。你以为所有的跳转dou是通过点击链接或者按键实现的？ 哈哈，这可就错了！ 咱跟你说个故事吧。

# Nginx 配置示例：SPA 所有路由dou返回 index.html location / { try_files $uri $uri/ /index.html; }

你kan这Nginx的配置啊，try_files这个东西，它其实有点儿“古怪”。 简单来说就是它会尝试先找文件或者目录来匹配你输入的URL。 Ru果找不到的话，就返回默认的index.html。 你懂的？ 就像一个老朋友问你：“嘿！你找啥？” 你说：“我找那个/user/profile。” 它先kankan有没有/user/profile这个文件。 Ru果没有，就告诉你：“找不到啊！” 然后告诉你index.html在哪里。

window.history.pushState

现在我们来玩个小游戏。 你打开浏览器来到react-router的官网，然后敲回车。 在命令行窗口里输入下面这段代码：

window.history.pushState

结果呢？ 你kan到浏览器里的URL变成了/home了。 但页面并没有跳转到/home啊！ 你一脸懵逼吧？ 我当时也这么想！ 我一直以为输入URL就一定会有服务器请求啊！ 毕竟URL嘛，就是互联网资源的地址对吧？

. 用户访问 `https://example.com/`. 服务器返回 `index.html`. 前端 JS 加载, 使用 `pushState` 跳转到 `/user/profile`. 地址栏变成 `/user/profile` , 页面正常显示 ✅ **此时用户刷新 `https://example.com/user/profile`**. 用户在 `/user/profile` 页面按 F5 刷新. 浏览器向服务器请求 `https://example.com/user/profile`. 服务器去找 `/user/profile` 这个路径对应的文件或接口. 找不到！返回 ❌ **为什么会 ？** 因为服务器上没有 `/user/profile` 这个真实的文件, 它只是前端路由的一个虚拟路径。 但是你kan啊！正常SPA应用程序不会出现404错误呀！ 这背后肯定有Nginx在捣鬼！ 就是这个try_files配置啊！ 它先尝试找到文件或者目录来匹配你的URL。 Ru果找不到的话，就会返回默认的index.html。 就好像你说：“我找那个user profile”，它先kankan有没有这个文件或者文件夹。“没有啊！” 然后告诉你哪里Neng找到你的朋友。

其实呢 ，咱跟你说个秘密：改变 URL 是一个动作 ，向服务器请求是另一个动作。

用户点击链接 → 地址栏 URL 变化 → 浏览器向新 URL 发送请求 → 服务器返回页面 → 页面刷新

上面这段代码是咱们常说的流程吧？ 但是呢 ，这其实是错误的思维定式！ 你觉得URL变化和向服务器请求是一个不可分割的原子操作吗？ 错了错了错了！ 改变 URL 是一个动作 ，而向服务器请求是另一个动作! 别被坑了!

咱们再来细细聊一下try_files内部回退配置 。 这玩意儿可不是随便就Neng忽略的哦 。

javascript window.history.pushState

这段代码就是HTML5提供的History API中的一个方法,用于在不刷新页面的情况下向浏览器的会话历史栈中添加一个新的历史记录条目。

咱就是说 ，SPA路由kan似简单 ，但背后隐藏着不少“花样”。 了解这些细节hen重要 ，才Nenggeng好地掌握SPA技术 。记住哦 ，改变URL和向服务器请求是两个不同的动作 。搞清楚这一点 ，就Neng避免hen多坑了!