为什么我的 React Router URL 在刷新或直接输入时会中断？

React-router URL 刷新或手动输入失败

了解服务器端与客户端路由

使用客户端路由时，URL 的解释方式有所不同。最初，请求发送到服务器。加载 React Router 脚本后，URL 会在本地发生变化，无需服务器请求即可触发页面转换。但是，未加载您网站的朋友的手动 URL 输入或复制粘贴会触发服务器请求。

服务器端路由

在这种情况下，服务器端路由是必要的。如果您想要的 URL 模式（例如，http://example.com/about）要同时在服务器端和客户端运行，则必须在两侧配置路由。

绕过解决方案：哈希历史记录与 Catch-all

• 哈希历史记录： 使用 URL 模式，例如http://example.com/#/about，保留在客户端上，不会影响服务器请求。 缺点： URL 看起来不太理想，并且没有服务器端渲染。
• 包罗万象： 指示服务器将所有请求（例如 /*）转发到单页（例如，index.html）。 缺点：没有最佳的 SEO 和代码重复。

混合和同构方法

• 混合： 通过为重要路线创建特定脚本来扩展包罗万象。 缺点： 设置复杂性增加、SEO 有限以及代码重复。
• 同构： 在服务器上使用 Node.js 来运行客户端上使用的相同 JavaScript 代码。 缺点：服务器上需要 Node.js、环境兼容性挑战以及陡峭的学习曲线。

选择正确的解决方案

选择符合您要求的解决方案。如果复杂性和时间受到限制，那么包罗万象是一个可以接受的起点。对于基于 Node.js 的服务器，同构渲染可以提供 SEO 优势，但需要付出更多努力。

推荐资源

• React Isomorphic Starterkit
• React Redux 通用热门示例
• 创建 React应用

请记住，为了获得最佳 SEO，服务器应发送与客户端呈现相同的标记。通过有效地结合服务器端和客户端路由，您可以确保您的 React-router URL 在所有场景中无缝运行。

以上是为什么我的 React Router URL 在刷新或直接输入时会中断？的详细内容。更多信息请关注PHP中文网其他相关文章！