Маршрутизация Azure мешает маршрутизации React

Question

В React SPA у меня есть коллекция "страниц" в папке / src / pages /.

Страница точки входа - это файл index.js в папке / src /, где яопределить маршрутизатор const следующим образом:

const routing = (
  <Router>
    <div>
      <Switch>
        <Route path="/signIn" component={SignIn} />
        <Route exact path="/" component={Homepage} />
        <Route path="/page1" component={Page1} />
        <Route path="/page2" component={Page2} />
        <Route path="/page3" component={Page3} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </Router>

Отлично работает при локальном размещении.Все страницы доступны для навигации, например «localhost / page2», и он правильно отображает компонент Page2 React.

Проблема возникает при размещении этого в службе приложений Azure.Если в Azure предпринята попытка выполнить такой маршрут "https://mypretentiousapp.azurewebsites.net/page2", то будет показана следующая ошибка:

Требуемый ресурс удален, изменилось его имя иливременно недоступно.

Как уже упоминалось здесь и здесь , я попытался добавить web.config в папку wwwroot с этой конфигурацией:

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React 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="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

К сожалению, это не решило проблему.

В качестве временного решения я создал виртуальные каталоги в службе приложений Azure, перенаправив каждый из них в корневую (/) папку,например:

• Виртуальный каталог "/ signIn", перенаправленный в: "/".
• Виртуальный каталог" / page1 ", перенаправленный в:" /".
• Виртуальный каталог "/ page2" направляется по адресу: "/".
• Виртуальный каталог" / page3 "направляется по адресу:" /".

Это временное решение, потому что:

• Не масштабируется. Для каждого нового созданного маршрута React необходимо было создать новый виртуальный каталог.в службе приложений.
• Приложение React "не найдено" страница никогда не будет достигнута.
• Этот обходной путь имеет невыносимый запах ", это дерьмо ".

Я что-то не так делаю с решением web.config, и оно действительно должно это исправить?Есть ли другие решения?