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

109

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

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

Теги:
react-router
react-router-v4

2 ответа

246
Лучший ответ

Опубликованное вами редактирование было действительным для более старой версии 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, который понимает path-to-regexp. Это позволяет значительно повысить гибкость при определении ваших путей, таких как повторение шаблонов, подстановочных знаков и т.д. Таким образом, чтобы определить параметр как необязательный, вы добавляете завершающий вопросительный знак (?).

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

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

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

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

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

Поделиться
  • 2
    Это все еще вопрос о нескольких необязательных параметрах в URL, например /route(/:category/(:article)
  • 1
    @ AlexShwarc, хорошая мысль, спасибо. Я добавил код для демонстрации нескольких необязательных параметров. Посмотри.
Показать ещё 8 комментариев
35

Для любых пользователей 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} />
Поделиться
  • 0
    @ user2928231 Спасибо, обновлено с их новыми документами URL. Насколько я могу судить, <Match pattern /> теперь снова <Route path /> , но суффикс вопросительного знака остается подходом для обработки необязательных параметров.
  • 2
    Привет! У меня все еще есть проблема с необязательным параметром, и я не могу заставить работать следующие маршруты: у меня есть players , players/123 , players/123/edit , players?unseen=true . Необязательный параметр ?unseen не работает для меня. хотя я попробовал все исправления из этого обсуждения. Не могли бы вы помочь с правильной строкой пути, которая будет обрабатывать это? Заранее спасибо!
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню