Я хочу оголосити шлях із необов'язковим параметром шляху, отже, коли я додаю його на сторінку, щоб зробити щось додаткове (наприклад, заповнити деякі дані):

http: // localhost / app / path / to / page <= візуалізація сторінки http: // localhost / app / path / to / page / pathParam <= візуалізація сторінки з деякими даними відповідно до pathParam

У моєму маршрутизаторі реакцій у мене є такі шляхи, щоб підтримувати два варіанти (це спрощений приклад):

<Router history={history}>    
   <Route path="/path" component={IndexPage}>
      <Route path="to/page" component={MyPage}/>
      <Route path="to/page/:pathParam" component={MyPage}/>
   </Route>    
</Router>

Моє запитання: чи можемо ми оголосити це одним маршрутом? Якщо я додаю лише другий рядок, то маршрут без параметра не знайдений.

РЕДАКТИКА №1:

Згадане тут рішення про наступний синтаксис не спрацювало для мене, чи це правильне? Чи існує вона в документації?

<Route path="/product/:productName/?:urlID?" handler={SomeHandler} />

Моя версія реактор-маршрутизатора: 1.0.3

Опублікована вами редакція була дійсною для старішої версії React-маршрутизатора (v0.13) і більше не працює.

Реагувати маршрутизатор v1, v2 та v3

Оскільки у версії 1.0.0ви визначаєте необов'язкові параметри за допомогою:

<Route path="to/page(/:pathParam)" component={MyPage} />

і для кількох необов'язкових параметрів:

<Route path="to/page(/:pathParam1)(/:pathParam2)" component={MyPage} />

Ви використовуєте дужки, ( )щоб обернути необов'язкові частини маршруту, включаючи провідну косу рису ( /). Перегляньте сторінку Посібника з узгодження маршруту в офіційній документації.

Примітка: параметр відповідає сегменту URL до наступного , або . Більше про шляхи та парами, зокрема, читайте тут .:paramName/?#

Реагуйте маршрутизатором v4 і вище

Реактивний маршрутизатор v4 принципово відрізняється, ніж v1-v3, і необов'язкові параметри шляху також чітко не визначені в офіційній документації .

Натомість вам доручено визначити pathпараметр, який розуміє шлях до regexp . Це дозволяє набагато більшу гнучкість у визначенні ваших шляхів, таких як повторення шаблонів, макіяжів тощо. Отже, щоб визначити параметр як необов'язковий, ви додаєте трейлінг-знак питання ( ?).

Таким чином, щоб визначити необов'язковий параметр, ви зробите:

<Route path="/to/page/:pathParam?" component={MyPage} />

і для кількох необов'язкових параметрів:

<Route path="/to/page/:pathParam1?/:pathParam2?" component={MyPage} />

Примітка: React Router v4 несумісний зреактор-маршрутизатор-реле( детальніше читайте тут ). Використовуйте натомість версію v3 або новішу (рекомендується v2).

Для будь-яких користувачів React Router v4, які приїжджають сюди після пошуку, необов’язкові параметри в a <Route>позначаються ?суфіксом.

Ось відповідна документація:

https://reacttraining.com/react-router/web/api/Route/path-string

шлях: рядок

Будь-який дійсний шлях URL-адреси, який розуміє шлях до повторного виразу .

<Route path="/users/:id" component={User}/>

https://www.npmjs.com/package/path-to-regexp#optional

За бажанням

Параметри можна суфіксувати знаком питання (?), Щоб зробити параметр необов’язковим. Це також зробить префікс необов’язковим.

Простий приклад хворобливого розділу сайту, до якого можна отримати доступ із номером сторінки або без неї.

<Route path="/section/:page?" component={Section} />

Робочий синтаксис для декількох необов’язкових парам:

<Route path="/section/(page)?/:page?/(sort)?/:sort?" component={Section} />

Тепер URL може бути:

1. / розділ
2. / розділ / сторінка / 1
3. / розділ / сторінка / 1 / сортування / ух

для реактора-маршрутизатора V5 і вище використовувати нижче синтаксису для кількох шляхів

<Route
          exact
          path={[path1, path2]}
          component={component}
        />