将 React Router 应用程序部署到服务器上的子文件夹答案

【问题标题】：Deploying React Router application to Subfolder on Server将 React Router 应用程序部署到服务器上的子文件夹
【发布时间】：2021-10-29 07:24:49
【问题描述】：

问题：

我们有我们的网站https://website.com，我们正在尝试将一个反应路由器应用程序部署到https://website.com/react-app。如果用户首先导航到https://website.com/react-app，然后从那里在应用程序中导航，则路由工作正常。但是，如果有人直接（或通过书签）导航到 https://website.com/react-app/home，他们会得到 404，即使 /home 是我们的路线之一。

我们尝试了什么：

在我们的 package.json 中，我们设置了 "homepage": "/react-app/"。使用 BrowserRouter，我们将 basename 属性设置为 /react-app，并且应用程序在部署时可以正常工作，但在直接导航到嵌套路由时会出现 404。我们听说 HashRouter 在这种情况下很有用，但是，当我们使用 HashRouter 时，我们得到的是https://website.com/react-app#/ 而不是https://website.com/react-app/#/。

我们如何配置它以允许用户直接导航到部署到我们服务器上 /react-app 子文件夹的 React Router 应用程序中的嵌套路由？

React：17.0.2，React-Router-Dom：5.2.0

【问题讨论】：

您需要在托管应用程序的服务器上设置重写规则（例如 nginx、apache 等...）
This article 在我尝试完成类似的事情时非常有帮助

标签： reactjs react-router-dom

【解决方案1】：

我认为问题一定与 React 无关。您的 React 应用程序配置正确。检查您的 Web 服务器的配置。当用户导航到任何页面时，您的网络服务器必须使用 React 应用程序返回 index.html。

【讨论】：