在生产中管理 reactjs 应用程序中的路由
Managing routes in reactjs app in production
如何在构建的 React 应用程序中处理路由？
具体来说，在开发环境中，我们可以简单地点击 <host>:<port>/<some-path> 并加载相应的组件，但是一旦应用 构建 ，我们会得到一堆静态文件和单个 index.html 文件，然后由某个服务器提供服务。
现在，在点击 url <server-host>:<server-port> 后，应用程序按预期工作，但在输入路径后，比如 <server-host>:<server-port>/<component-path>，返回 404 错误 .
如果有，比如说一个按钮，点击它时，相同的 /<component-path> 将被重定向，该应用程序可以运行，但是在刷新该页面时，再次发生 404 错误 。
如何解决？为此类在不同路径上具有许多组件的应用程序提供服务的正确方法是什么？
方法1：（推荐）
在 server config 中，您应该 point 所有 urls ( http://ipaddress:port/<* any url pattern>) 到 index.html 的反应应用程序。这被称为 fallback-mechanism.
当任何请求到来时，index.html React 应用程序会自动处理，因为它是单页应用程序。
方法2：
在 React 应用程序中使用 HashRouter。所以你不必配置任何东西。
根据您要部署到的服务器，您应该将所有错误重定向到 index.html 查找配置可能是 htaccess 或者例如，如果它是 AWS S3 存储桶，您只需将错误页面指定为相同的index.html 提供的文件。然后，您使用诸如 react-router-dom 之类的路由库来处理代码中的实际错误，以处理实际错误。您的失败是因为在静态主机的正常情况下，当您提供 URL 之类的 <server-port>/<component-path> 时，服务器假设服务器的根目录中有一个名称为 component-path 的文件夹，该文件夹具有从中加载和显示的索引文件，但在 React 单页应用程序的情况下，一切都由 index.html 管理。所以每个请求都必须通过 index.html
如何在构建的 React 应用程序中处理路由？
具体来说，在开发环境中，我们可以简单地点击 <host>:<port>/<some-path> 并加载相应的组件，但是一旦应用 构建 ，我们会得到一堆静态文件和单个 index.html 文件，然后由某个服务器提供服务。
现在，在点击 url <server-host>:<server-port> 后，应用程序按预期工作，但在输入路径后，比如 <server-host>:<server-port>/<component-path>，返回 404 错误 .
如果有，比如说一个按钮，点击它时，相同的 /<component-path> 将被重定向，该应用程序可以运行，但是在刷新该页面时，再次发生 404 错误 。
如何解决？为此类在不同路径上具有许多组件的应用程序提供服务的正确方法是什么？
方法1：（推荐）
在 server config 中，您应该 point 所有 urls ( http://ipaddress:port/<* any url pattern>) 到 index.html 的反应应用程序。这被称为 fallback-mechanism.
当任何请求到来时，index.html React 应用程序会自动处理，因为它是单页应用程序。
方法2：
在 React 应用程序中使用 HashRouter。所以你不必配置任何东西。
根据您要部署到的服务器，您应该将所有错误重定向到 index.html 查找配置可能是 htaccess 或者例如，如果它是 AWS S3 存储桶，您只需将错误页面指定为相同的index.html 提供的文件。然后，您使用诸如 react-router-dom 之类的路由库来处理代码中的实际错误，以处理实际错误。您的失败是因为在静态主机的正常情况下，当您提供 URL 之类的 <server-port>/<component-path> 时，服务器假设服务器的根目录中有一个名称为 component-path 的文件夹，该文件夹具有从中加载和显示的索引文件，但在 React 单页应用程序的情况下，一切都由 index.html 管理。所以每个请求都必须通过 index.html