Переписать URL для вложенного URL в ReactJS

#reactjs #iis #url-rewriting

#reactjs #iis #url-перезапись

Вопрос:

я запускаю приложение react в IIS, я использовал перезапись URL-адреса для настройки маршрутов, это мой файл web.config:

 <?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
          <rules>
            <rule name="ReactRouter Routes" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                 <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                <add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
              </conditions>
              <action type="Rewrite" url="index.html" />
            </rule>
          </rules>
        </rewrite>
    </system.webServer>
</configuration>
  

этот код отлично работает для URL-адреса типа localhost / ReactApp / User,
теперь я хочу, чтобы он работал как localhost / ReactApp / User / Edit, но он не работает для дочерних страниц, он показывает пустую страницу,
эта проблема возникает только после сборки и развертывания, пожалуйста, дайте мне знать, как это может работать для / User / Редактировать вложенные или дочерние страницы?

Комментарии:

1. У меня такая же проблема, но я не могу заставить какие-либо маршруты работать, где вы используете этот web.config? Существуют ли другие web.config в других каталогах?

Ответ №1:

при обслуживании приложения react из вложенной папки вам необходимо задать базовое имя в ваших маршрутах <BrowserRouter basename='/path/to/subfolder/'> или

попробуйте использовать приведенное ниже правило перезаписи URL-адреса iis:

 <rewrite>
  <rules>
    <rule name="Imported Rule 1" stopProcessing="true">
      <match url="^" ignoreCase="false" />
      <conditions logicalGrouping="MatchAny">
        <add input="{DOCUMENT_ROOT}{URL}" matchType="IsFile" ignoreCase="false" />
        <add input="{DOCUMENT_ROOT}{URL}" matchType="IsDirectory" ignoreCase="false" />
      </conditions>
      <action type="None" />
    </rule>
    <!--# Fallback all other routes to index.html-->
    <rule name="Imported Rule 2" stopProcessing="true">
      <match url="^" ignoreCase="false" />
      <action type="Rewrite" url="/path/to/subfolder/index.html" />
    </rule>
  </rules>
</rewrite>
  

Комментарии:

1. Должен ли путь к базовому имени быть похожим на /appfolder/app/build/? В папку сборки?

2. @Erik в папке сайта клятва вы должны выбрать папку сборки, но в правиле перезаписи URL вы могли бы задать индексный файл. если индексный файл находится во вложенной папке, добавьте вложенную папку oath.