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

Wasyster спросил: 11 марта 2019 в 07:31 в: reactjs

Мне нужна динамическая маршрутизация в приложении Reac, использующем Reaction-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


0 ответов