在生产中管理 reactjs 应用程序中的路由

Posted 2023-02-19

【中文标题】在生产中管理 reactjs 应用程序中的路由

【英文标题】：Managing routes in reactjs app in production

【发布时间】：2020-02-01 14:13:41

【问题描述】：

在构建的 React 应用中如何处理路由？

具体来说，在开发环境中，我们可以简单地点击<host>:<port>/<some-path>并加载相应的组件，但是一旦应用构建，我们会得到一堆静态文件和单个 index.html 文件，然后由某个服务器提供服务。 现在，在点击 url <server-host>:<server-port> 时，应用程序按预期工作，但在输入路径时，比如 <server-host>:<server-port>/<component-path>，返回 404 错误。 如果有，比如说一个按钮，点击哪个按钮，同样的/<component-path> 将被重定向，应用程序可以工作，但是在刷新该页面时再次发生404错误。

如何解决？为在不同路径上具有许多组件的此类应用程序提供服务的正确方法是什么？

【参考方案1】：

方法1：（推荐）

在 server config 你应该 point 所有 urls (http://ipaddress:port/<* any url pattern>) 到 index.html 的 react-app 。这被称为fallback-mechanism。

当任何请求到来时，React 应用程序的index.html 会自动处理，因为它是单页应用程序。

方法2：

在 React 应用中使用 HashRouter。所以你不必配置任何东西。

【参考方案2】：

根据您要部署到的服务器，您应该将所有错误重定向到 index.html 查找配置可能是 htaccess 或者例如，如果它是 AWS S3 存储桶，您只需将错误页面指定到同一个 index.html 文件即服务。然后，您使用可能像 react-router-dom 这样的路由库来处理代码中的实际错误，以处理实际错误。您的失败是因为在正常情况下，在静态主机中，当您提供像 <server-port>/<component-path> 这样的 URL 时，服务器会假设您的根目录中有一个名称为 component-path 的文件夹，其中有一个索引文件从哪里加载和显示，但在 React 单页应用程序的情况下，一切都由 index.html 管理。所以每个请求都必须通过 index.html