Question

我有一个React应用。在开发过程中，我在chrome中对其进行了测试，并且按预期运行。但是，当我运行build并将其上传到实时服务器时，它会复制栏中的部分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浏览器中，当我单击导航至下一页时，在导航栏中显示了此内容： ... / oceanside-yacht-club / oceanside-yacht-club /预订/搜索在Waterfox中，我得到了预期的URL ... / oceanside-yacht-club / booking / search

前两页有效，然后什么也没有。在两个浏览器的“网络”选项卡中，都没有请求，但是应该有。我使用nSwag studio生成了对.NET后端的API调用。

该应用程序通过以下web.config托管在Azure上，作为AppService：

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

使用ReactRouter v4进行反应URL栏中的父路径重复

0 个答案: