使用地址栏在单页应用程序中路由用户

Posted 2023-02-21

【中文标题】使用地址栏在单页应用程序中路由用户

【英文标题】：Routing an user in a single page application using the adress bar

【发布时间】：2018-02-08 15:10:15

【问题描述】：

我有一个后端使用 express 来提供静态目录，路径为/，其中包含一个单页前端。此后端还提供 API REST。

前端内置在 React 中，并使用 react-router 从 Web 应用程序的不同视图中路由用户。

如果我的 react-router 有两个条目，比如说 /app 和 /config，

如果用户直接在 Web 浏览器的地址栏中输入 URL，我如何将客户端重定向到该应用程序视图？

现在，如果我这样做，Express 会收到请求并显然返回 404 消息，因为单个页面将提供给 / 路径。

【参考方案1】：

解决此问题的一种简单方法是始终（即使在 404 上）在您的快速路由处理程序中向用户发送 index.html。

见：https://***.com/a/25499007/2624575

但是，你需要注意一些事情：

1) 你的 React Router 代码应该开始处理 404：https://***.com/a/37491381/2624575

2) 您需要正确处理资产的路径（图标、css、js 等），否则您将向这些资源发送相同的index.html（这会使您的页面呈现不正确）

3) 确保react-router 使用browserHistory（不使用哈希的历史#），这样React 将能够正确渲染您的路由

希望对你有帮助！

【讨论】：

所以，澄清一下：我是否必须摆脱快速静态服务，并在前端检查请求的路径？

@lilezek 您仍然需要使用 express 静态服务（因为您的所有资产都需要通过 express 服务）。您只需要添加一条规则以始终提供index.html，即使在 404 上也是如此。您现在的问题是 express 将“/app”和“/config”视为 404，但您需要 index.html。你明白吗？

是的，我理解那部分，但是，在给出index.html 之后，react-router 是否会从地址栏将用户路由到应用程序视图？我必须在前端做一些额外的事情吗？

当然！一旦它加载了您的 javascript，React Router 将查看您的 url（在这种情况下，/app 和 /config）并检查您的路由是否与给定的 url 匹配。如果匹配，它将呈现您的路线。只要确保您使用的是browserHistory（更新了我的答案）。