React Router с дополнительным параметром пути

Я хочу объявить путь с необязательным параметром пути, поэтому, когда я добавлю его на страницу, чтобы сделать что-то лишнее (например, заполнить некоторые данные):

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>

Мой вопрос: можем ли мы объявить его в одном маршруте? Если я добавлю только вторую строку, то маршрут без параметра не будет найден.

EDIT # 1:

Решение, упомянутое здесь о следующем синтаксисе, не работает для меня, правильно ли оно? Он существует в документации?

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

Моя версия реакционного маршрутизатора: 1.0.3

Ответы

Ответ 1

Размещенное вами изменение действительно для более старой версии React-router (v0.13) и больше не работает.

React Router v1, v2 и v3

Начиная с версии 1.0.0 вы определяете необязательные параметры с помощью:

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

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

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

Вы используете круглые скобки ( ) для переноса дополнительных частей маршрута, включая косую черту (/). Посетите страницу " Руководство по сопоставлению маршрутов" официальной документации.

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

React Router v4 и выше

React Router v4 принципиально отличается от v1-v3, и необязательные параметры пути также явно не определены в официальной документации.

Вместо этого, вы проинструктированы, чтобы определить path параметр, путь к регулярному выражению понимающий. Это обеспечивает большую гибкость в определении ваших путей, таких как повторяющиеся шаблоны, подстановочные знаки и т.д. Поэтому, чтобы определить параметр как необязательный, вы добавляете конечный знак вопроса (?).

Таким образом, чтобы определить необязательный параметр, вы делаете:

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

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

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

Примечание: React Router v4 несовместим с react-router-relay (подробнее здесь). Вместо этого используйте версию v3 или более раннюю (рекомендуется v2).

Ответ 2

Для любых пользователей React Router v4, прибывающих сюда после поиска, необязательные параметры в <Route> обозначаются суффиксом ?.

Здесь соответствующая документация:

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

путь: строка

Любой допустимый путь URL, который path-to-regexp понимает.

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

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

Дополнительно

Параметры могут быть помечены знаком вопроса (?), чтобы сделать параметр необязательным. Это также сделает префикс необязательным.

Простой пример разбитого на разделы раздела сайта, к которому можно получить доступ с номером страницы или без нее.

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

Ответ 3

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

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

Теперь URL может быть:

  1. /раздел
  2. /Раздел/стр/1
  3. /Раздел/страница /1/сортировать/по возрастанию