reactjs - React app route not working after deployed to IIS

Question

I'm new to reactjs and currently facing some issue on IIS deployment for react app.

i execute npm run build and it generate a build folder, i then copy this folder to my IIS. When i browse the page, im able to view blank page but when i navigate to test route it shows 404.

I've try to add "homepage":"/" or "homepage":"." in my package.json but still the same.

index.html

This is my build structure

Any help is appreciated.

标签： reactjsiis

Answer 1

每当您将反应页面部署到生产环境时，您都会面临这个问题。请参考此页面：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

应该放在前端构建目录中的 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>