1

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

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

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

4

2 回答 2

3

方法1：（推荐）

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

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

方法2：

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

于 2019-10-03T09:32:00.157 回答
2

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

于 2019-10-03T12:04:22.463 回答