Beim Hosten einer React-App mit React Router auf einem IIS (Internet Information Services) Server treten häufig Routing-Probleme auf, da IIS die Routen anders behandelt als typische Single-Page-Anwendungsserver. Diese Anleitung führt Sie durch das Konfigurieren von IIS-Rewrite-Regeln, das Einrichten von React Router und das Beheben gängiger Bereitstellungsprobleme, um sicherzustellen, dass Ihre clientseitige Routing auf IIS reibungslos funktioniert.

Wie man React Router auf IIS konfiguriert

  1. Schritt 1: Konfigurieren von IIS-Rewrite-Regeln

    IIS muss so konfiguriert werden, dass es clientseitiges Routing ordnungsgemäß behandelt. Fügen Sie Rewrite-Regeln in Ihre web.config-Datei ein, um alle Anfragen an die index.html-Datei weiterzuleiten:

    <configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="React Router Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

    Fügen Sie diese Konfiguration in Ihre web.config-Datei im Stammverzeichnis Ihrer React-App ein.

  2. Schritt 2: Setzen der basename-Eigenschaft in React Router

    In Ihrer React Router-Konfiguration verwenden Sie die basename-Eigenschaft, um die Basis-URL für alle Standorte anzugeben. Dies sollte mit dem Unterverzeichnis oder virtuellen Verzeichnis übereinstimmen, in dem Ihre App auf dem IIS-Server gehostet wird:

    <BrowserRouter basename="/your-subdirectory">
  {/* Routes */}
</BrowserRouter>

    Ersetzen Sie /your-subdirectory durch den tatsächlichen Pfad des Unterverzeichnisses, in dem Ihre App auf dem Server gehostet wird.

  3. Schritt 3: Konfigurieren der Build-Einstellungen

    Beim Erstellen Ihrer React-App konfigurieren Sie die richtige Homepage-URL in Ihrer package.json-Datei. Dies sollte ebenfalls mit dem Unterverzeichnis oder virtuellen Verzeichnis übereinstimmen, in dem Ihre App auf dem IIS-Server gehostet wird:

    "homepage": "/your-subdirectory"

    Ersetzen Sie /your-subdirectory durch den tatsächlichen Pfad des Unterverzeichnisses.

  4. Schritt 4: Lokales Testen

    Vor dem Bereitstellen auf den IIS-Server testen Sie Ihre React-App lokal, um sicherzustellen, dass das Routing wie erwartet funktioniert. Sie können Tools wie serve oder http-server verwenden, um Ihre gebauten React-App lokal bereitzustellen und das Routing zu testen.

  5. Schritt 5: Bereitstellen und Debuggen

    Bereiten Sie Ihre React-App auf dem IIS-Server bereit und testen Sie das Routing. Wenn Sie Probleme auftreten, verwenden Sie die Entwicklerwerkzeuge Ihres Browsers, um Netzwerkanfragen und Konsolenfehler zu überprüfen, um Hinweise darauf zu erhalten, was möglicherweise schief gelaufen ist.