Når du hoster en React-app med React Router på en IIS (Internet Information Services)-server, oppstår ofte ruttingproblemer fordi IIS håndterer ruter annerledes enn typiske single-page-applikasjonsservere. Denne guiden fører deg gjennom å konfigurere IIS rewrite-regler, sette opp React Router korrekt og feilsøke vanlige distribusjonsproblemer for å sikre at klient-side routing fungerer sømløst på IIS.

Hvordan du konfigurerer React Router på IIS

  1. Trinn 1: Konfigurer IIS rewrite-regler

    IIS må konfigureres for å håndtere klient-side routing korrekt. Legg til rewrite-regler i din web.config-fil for å omdirigere alle forespørsler til index.html-fila:

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

    Plasser denne konfigurasjonen i din web.config-fil i rotdirectory-en til React-appen din.

  2. Trinn 2: Sett basename-prop i React Router

    I konfigurasjonen av React Router, bruk basename-prop for å spesifisere basenettadressen for alle lokasjoner. Dette bør matche underkatalogen eller den virtuelle kataloget der appen er hostet på IIS-serveren:

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

    Erstatt /your-subdirectory med den faktiske underkatalogstien der appen er hostet på serveren.

  3. Trinn 3: Konfigurer byggeinnstillinger

    Når du bygger React-appen din, konfigurer den korrekte hjemmesidenettadressen i din package.json-fil. Dette bør også matche underkatalogen eller den virtuelle kataloget der appen vil bli hostet på IIS-serveren:

    "homepage": "/your-subdirectory"

    Erstatt /your-subdirectory med den faktiske underkatalogstien.

  4. Trinn 4: Test lokalt

    Før du distribuerer til IIS-serveren, tester du React-appen din lokalt for å sikre at routing fungerer som forventet. Du kan bruke verktøy som serve eller http-server for å serve den bygde React-appen din lokalt og teste routing.

  5. Trinn 5: Distribuer og feilsøk

    Distribuer React-appen din til IIS-serveren og tester routing. Hvis du står overfor problemer, bruk verktøy for utvikler i nettleseren for å inspisere nettverksforespørsler og konsolfeil for indikasjoner på hva som kan gå galt.