React router v4 динамический параметр

Question

Мне нужна динамическая маршрутизация в моем приложении Reac, которое использует response-router v4. Я хочу следующий адрес, чтобы построить

http://localhost:7777/oceanside-yaht-club/booking/search

где oceanside-yaht-club может динамически меняться в зависимости от нашего клиента.

Но это то, что я сейчас получаю с моей попытки:

http://localhost:7777/oceanside-yaht-club/:pathParam/booking/search

Вот как я пытался:

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',
    BookingClose = 'booking/close'
}

export module Urls
{
    export const home = `/${Routes.Home + ':pathParam?'}`;
    export const bookingSearch = ':pathParam' + `/${Routes.BookingSearch}`;
    export const bookingOffers = `/${Routes.BookingOffers}`;
    export const bookingExtras = `/${Routes.BookingExtras}`;
    export const bookingContactDetails = `/${Routes.BookingContactDetails}`;
    export const bookingBoatDetaisl = `/${Routes.BookingBoatDetails}`;
    export const bookingPayment = `/${Routes.BookingPayment}`;
    export const bookingComplete = `/${Routes.BookingComplete}`;
    export const bookingClose = `/${Routes.BookingClose}`;
}

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 } />
        <Route exact path={ Urls.bookingClose } component={ WindowsCloseDialog } />
    </React.Fragment>

и вот как я запихиваю в историю роутера

const url: string = `${this.store.state.marinaData.MarinaUrlName}/${Urls.bookingSearch}`;
// const url: string = `oceanside-yaht-club/${Urls.bookingSearch}`; //for test
this.props.history.push(url);

Я даже пытался это регулярное выражение, но не понял, как реализовать в моем коде

Thnx

Answer 1

Вы не можете использовать параметр Route path как он есть непосредственно при передаче url в history.push, вместо этого ему нужна полная ссылка.

Вы можете изменить код на

const url: string = `${this.store.state.marinaData.MarinaUrlName}/${Routes.BookingSearch}`;

this.props.history.push(url);