Реагируйте маршрутизатор с дополнительным параметром пути

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

http://localhost/app/path/to/page http://localhost/app/path/to/page/pathParam

в моем маршрутизаторе react у меня есть следующие пути, чтобы поддерживать два варианта (это упрощенный пример):

<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} />

моя версия react-router: 1.0.3

2 177
javascript reactjs react-router react-router-v4

2 ответа:

редактирование, которое вы опубликовали, было действительным для более старой версии React-router (v0.13) и больше не работает.

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

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

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

и несколько дополнительно параметры:

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

вы используете скобки () чтобы обернуть дополнительные части маршрута,в том числе ведущий Слэш (/). Проверьте Руководство По Сопоставлению Маршрутов страница официальной документации.

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

реагировать маршрутизатор v4

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

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

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

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

и несколько дополнительно параметры:

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

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

409

для любых пользователей React Router v4, прибывающих сюда после поиска, необязательные параметры в <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

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

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

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

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