Reactjs部署问题

编程问答 2022-08-12

问题描述

我通过url重写在IIS服务器上通过“构建”部署，但是我注意到应用程序未加载。

我的Reactjs应用程序包装在Express节点中。

这是未加载的应用程序的网址：http://booleandev.com/expense-tracker

这是加载http://booleandev.com:9000的应用程序的URL

我注意到无法加载应用程序的原因是因为所有链接都链接到断开的链接-booleandev.com/static /...

我该如何解决这个问题。

谢谢。

解决方法

尝试使用公共路径：

const publicPath = '/path/to/subfolder/';

export const routeCodes = {
  HOME: publicPath,SEARCH: `${ publicPath }search`,ABOUT: `${ publicPath }about`,};

// Then you can use them like this
// <Route exact path={ routeCodes.ABOUT } component={ About } />

和react-router规则：

<rewrite>
  <rules>
    <rule name="Imported Rule 1" stopProcessing="true">
      <match url="^" ignoreCase="false" />
      <conditions logicalGrouping="MatchAny">
        <add input="{DOCUMENT_ROOT}{URL}" matchType="IsFile" ignoreCase="false" />
        <add input="{DOCUMENT_ROOT}{URL}" matchType="IsDirectory" ignoreCase="false" />
      </conditions>
      <action type="None" />
    </rule>
    <!--# Fallback all other routes to index.html-->
    <rule name="Imported Rule 2" stopProcessing="true">
      <match url="^" ignoreCase="false" />
      <action type="Rewrite" url="/path/to/subfolder/index.html" />
    </rule>
  </rules>
</rewrite>

参考链接：

How to bundle a React app to a subdirectory on a server?

iisiisiis-8reactjsreactjs