reactjs - 部署到 IIS 后 React 应用程序路由不起作用

Question

我是 reactjs 的新手，目前在为 React 应用部署 IIS 时遇到一些问题。

我执行 npm run build 并生成一个构建文件夹，然后我将此文件夹复制到我的 IIS。当我浏览页面时，我能够查看空白页面，但是当我导航到测试路线时，它显示 404。

我尝试添加“主页”:“/”或“主页”:“。”在我的 package.json 中，但仍然相同。

index.html

这是我的构建结构

感谢任何帮助。

Answer 1

每当您将 React 页面部署到生产环境时，您都会遇到这个问题。请引用此页面:https://inthetechpit.com/2019/06/13/handle-client-side-routes-with-iis-on-page-refresh-react-app/

问题发生在服务器上(不仅是 IIS，而是所有服务器)。您将需要安装扩展，然后将配置文件添加到前端构建目录的路径中。

要安装的扩展在这里:https://www.iis.net/downloads/microsoft/url-rewrite

前端build目录下的web.config文件内容如下:

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
    <rewrite>
      <rules>
        <rule name="ReactRouter Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
          </conditions>
          <action type="Rewrite" url="index.html" />
        </rule>

      </rules>
    </rewrite>
</system.webServer>
</configuration>