Når du værker med at hoste en React-app med React Router på en IIS (Internet Information Services) server, opstår ofte routing-problemer, da IIS håndterer ruter anderledes end typiske single-page-applikationsservere. Denne guide fører dig gennem konfiguration af IIS rewrite-regler, korrekt opsætning af React Router og fejlfinding af almindelige deployments-problemer for at sikre, at din clientside-routing fungerer problemfrit på IIS.

Sådan konfigurerer du React Router på IIS

  1. Trin 1: Konfigurér IIS Rewrite Regler

    IIS skal konfigureres til at håndtere clientside-routing korrekt. Tilføj rewrite-regler til din web.config-fil for at omdirigere alle anmodninger til index.html-filen:

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

    Placer denne konfiguration i din web.config-fil i roden af din React-app.

  2. Trin 2: Sæt basename Prop i React Router

    I din React Router-konfiguration, brug basename-prop'en til at angive basen URL for alle beliggenheder. Dette skal matche underkataloget eller den virtuelle katalog, hvor din app er hosted på IIS-serveren:

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

    Erstat /your-subdirectory med den faktiske underkatalogsti, hvor din app er hosted på serveren.

  3. Trin 3: Konfigurér Build Indstillinger

    Når du bygger din React-app, konfigurer den korrekte hjemmeside URL i din package.json-fil. Dette skal også matche underkataloget eller den virtuelle katalog, hvor din app vil blive hosted på IIS-serveren:

    "homepage": "/your-subdirectory"

    Erstat /your-subdirectory med den faktiske underkatalogsti.

  4. Trin 4: Test Lokalt

    Før du deployer til IIS-serveren, test din React-app lokalt for at sikre, at routing fungerer som forventet. Du kan bruge værktøjer som serve eller http-server til at servere din byggede React-app lokalt og teste routing.

  5. Trin 5: Deploy og Debug

    Deploy din React-app til IIS-serveren og test routing. Hvis du støder på problemer, brug browserens udviklingsværktøj til at inspicere netværksanmodninger og konsolfejl for ledtråde til det, der kan gå galt.