Kun hostaat React-sovellusta React Routerin avulla IIS (Internet Information Services)-palvelimella, reititysvaihteita tapahtuu usein siksi, että IIS käsittelee reittejä eri tavalla kuin tyypilliset single-page sovelluspalvelimet. Tämän oppaan avulla opetetaan määrittelemään IIS:n uudelleenohjaussäännöt, asentamaan React Router oikein ja vianmäärittämään yleisiä käyttöönoton ongelmia varmistaaksesi, että asiakaspuolen reititys toimii sujuvasti IIS:ssä.

Miten määrittää React Router IIS:lle

  1. Vaihe 1: Määrittele IIS:n uudelleenohjaussäännöt

    IIS:n täytyy määrittää käsittelemään asiakaspuolen reititystä oikein. Lisää uudelleenohjaussäännöt web.config-tiedostoon ohjauttaaksesi kaikki pyynnöt index.html-tiedostoon:

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

    Sijoita tämä määritys React-sovelluksesi juurihakemistoon sijaitsevaan web.config-tiedostoon.

  2. Vaihe 2: Määrittele basename -ominaisuus React Routerissa

    React Routerin määrityksissä käytä basename-ominaisuutta määrittelemään kaikkien sijaintien perus-URL. Tämän pitäisi vastata alihakemistoa tai virtuaalista hakemistoa, jossa sovelluksesi on hostattuna IIS-palvelimella:

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

    Korvaa /your-subdirectory oikealla alihakemistopolulla, jossa sovelluksesi on hostattuna palvelimella.

  3. Vaihe 3: Määrittele build-asetukset

    Kun kääntät React-sovelluksen, määrittele oikea kotisivun URL package.json-tiedostossa. Tämän pitäisi myös vastata alihakemistoa tai virtuaalista hakemistoa, jossa sovelluksesi on hostattuna IIS-palvelimella:

    "homepage": "/your-subdirectory"

    Korvaa /your-subdirectory oikealla alihakemistopolulla.

  4. Vaihe 4: Testaa paikallisesti

    Ennen käyttöönottoa IIS-palvelimelle, testaa React-sovelluksesi paikallisesti varmistaaksesi, että reititys toimii odotetusti. Voit käyttää työkaluja kuten serve tai http-server paikallisen React-sovelluksen tarjoamiseen ja reitityksen testaamiseen.

  5. Vaihe 5: Käyttöönotto ja virheenkorjaus

    Käytöönottaa React-sovelluksesi IIS-palvelimelle ja testaa reititystä. Jos kohtaat ongelmia, käytä selaimen kehittämistyökaluja verkkopyyntöjen ja konsolin virheiden tarkastelemiseksi saamaan vihreitä siitä, mitä vika voi olla.