Реагируйте с ReactRouter v4. Дублируйте родительские пути в строке URL.

Question

У меня есть приложение реакции. В процессе разработки я тестировал его в Chrome, и он работал как положено Но когда я запускаю сборку и загружаю на работающий сервер, он дублирует часть URL-адреса в панели.

Вот как я это определил:

export enum Routes
{
    Home = '',
    BookingSearch = 'booking/search',
    BookingOffers = 'booking/offers',
    BookingExtras = 'booking/extras',
    BookingContactDetails = 'booking/contact',
    BookingBoatDetails = 'booking/boat',
    BookingPayment = 'booking/payment',
    BookingComplete = 'booking/complete'
}

export module Urls
{
    export const home = `/${Routes.Home + ':pathParam?'}`;
    export const bookingSearch = '/:pathParam/booking/search';
    export const bookingOffers = '/:pathParam/booking/offers';
    export const bookingExtras = '/:pathParam/booking/extras';
    export const bookingContactDetails = '/:pathParam/booking/contact';
    export const bookingBoatDetaisl = '/:pathParam/booking/boat';
    export const bookingPayment = '/:pathParam/booking/payment';
    export const bookingComplete = '/:pathParam/booking/complete';
}

Вот пример того, как я помещаю URL в историю маршрутизатора.

submitHandler = () =>
{
    this.props.history.push(Routes.BookingOffers);
}

Мои маршруты:

export const IndexRoutes = () =>
    <React.Fragment>
        <Route exact path={ Urls.home } component={ App } />
        <Route exact path={ Urls.bookingSearch } component={ Search } />
        <Route exact path={ Urls.bookingOffers } component={ Offers } />
        <Route exact path={ Urls.bookingExtras } component={ Extras } />
        <Route exact path={ Urls.bookingContactDetails } component={ ContactDetails } />
        <Route exact path={ Urls.bookingBoatDetaisl } component={ BoatDetails } />
        <Route exact path={ Urls.bookingPayment } component={ Payment } />
        <Route exact path={ Urls.bookingComplete } component={ Complete } />
    </React.Fragment>

И мой index.tsx

const container =
      <AppContainer>
        <Router history={ history }>
          <IndexRoutes/>
        </Router>
      </AppContainer>

const ROOT = document.getElementById('root');

ReactDOM.render(container, ROOT);

В Chrome, когда я нажимаю, чтобы перейти на следующую страницу, я получаю это в навигационной панели: ... / Оушнсайд-яхт-клуб / Оушнсайд-яхт-клуб / бронирование / поиск В Waterfox я получил URL, как и ожидалось ... / Оушнсайд-яхт-клуб / бронирование / поиск

Первые две страницы работают, потом ничего. На вкладке Сеть в обоих браузерах нет запросов, но там должно быть. Я использовал nSwag studio для генерации своих вызовов API для бэкэнда .NET.

Приложение размещено в Azure как AppService со следующим web.config:

<?xml version="1.0"?>
<configuration>
    <system.webServer>
    <staticContent>
       <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    </staticContent>
        <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>