När du hostar en React-app med React Router på en IIS-server (Internet Information Services) kan du stöta på problem med routning. Detta beror på att IIS hanterar rutter annorlunda än en typisk server för single-page applications (SPA). Den här guiden hjälper dig att konfigurera IIS korrekt så att klientsidans routning fungerar som förväntat.

Så här gör du

  1. Steg 1: Konfigurera IIS Rewrite Rules

    IIS måste konfigureras för att korrekt hantera routning på klientsidan. Lägg till omskrivningsregler i din web.config-fil i rotkatalogen för din React-app:

    <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>

    Denna regel omdirigerar alla förfrågningar som inte matchar en fysisk fil eller katalog till index.html.

  2. Steg 2: Ange basename-prop i React Router

    I din React Router-konfiguration, använd basename-propen för att specificera bas-URL:en för alla platser. Detta bör matcha underkatalogen eller den virtuella katalogen där din app är värd på IIS-servern:

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

    Ersätt /your-subdirectory med den faktiska sökvägen till underkatalogen där din app är värd på servern.

  3. Steg 3: Säkerställ korrekt byggkonfiguration

    När du bygger din React-app, konfigurera rätt hem-URL i din package.json-fil. Detta bör också matcha underkatalogen eller den virtuella katalogen där din app kommer att vara värd på IIS-servern:

    "homepage": "/your-subdirectory"

    Ersätt /your-subdirectory med den faktiska sökvägen till underkatalogen.

  4. Steg 4: Testa lokalt

    Innan du distribuerar till IIS-servern, testa din React-app lokalt för att säkerställa att routningen fungerar som förväntat. Du kan använda verktyg som serve eller http-server för att servera din byggda React-app lokalt och testa routning.

  5. Steg 5: Distribuera och felsöka

    Distribuera din React-app till IIS-servern och testa routning. Om du stöter på problem, använd webbläsarens utvecklarverktyg för att inspektera nätverksförfrågningar och konsolfel för eventuella ledtrådar om vad som kan gå fel.