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

306

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

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

ТВО
источник

Ответы:

650

Размещенное вами изменение действительно для старой версии 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} />

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

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


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 несовместим с( читайте больше здесь ). Вместо этого используйте версию v3 или более раннюю (рекомендуется v2).

Крис
источник
2
Это еще вопрос о нескольких дополнительных Params в URL, как/route(/:category/(:article)
Alex Shwarc
1
@ AlexShwarc, хорошая мысль, спасибо. Я добавил код для демонстрации нескольких необязательных параметров. Посмотри.
Крис
1
@ Крис, я уверен, это так не работает, ты это проверял?
Алекс Шварц
@Chris с 3 версией
Алекс Шварц
1
Могу ли я создать необязательный параметр path для основного маршрута? Например, мне нужно добавить языковой параметр в путь, и URL моей домашней страницы будет "/" и "/ en". Вот демо
Холявко
76

Для любых пользователей React Router v4, прибывающих сюда после поиска, необязательные параметры в a <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} />
Джон
источник
@ user2928231 Спасибо, обновлено с их новыми документами URL. Насколько я могу судить <Match pattern />, теперь <Route path />снова, но суффикс вопросительного знака остается подходом для обработки необязательных параметров.
Джон
2
Здравствуй! Я до сих пор есть проблемы с дополнительным параметром и не могу сделать следующие маршруты работы: Я players, players/123, players/123/edit, players?unseen=true. Необязательный параметр ?unseenне работает для меня. хотя я попробовал все исправления из этого обсуждения. Не могли бы вы помочь с правильной строкой пути, которая будет обрабатывать это? Заранее спасибо!
Кристина Скварок
Привет @KhrystynaSkvarok, вы когда-нибудь выясняли, как получить ваш путь без дополнительной строки запроса? Я пытаюсь сделать то же самое
sabliao
2
@sabliao Привет! У меня нет рабочего примера, но для URL, например, example.com/search?query=testпопробуйте использовать следующий шаблон /:search(search).
Кристина Скварок
Как я могу получить параметры из URL после разделителя?
PHP ниндзя
15

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

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

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

  1. /раздел
  2. / Раздел / стр / 1
  3. / Раздел / страница / 1 / сортировать / по возрастанию
Небойша Сапич
источник
1

для реакции-маршрутизатора V5 и выше используйте синтаксис ниже для нескольких путей

<Route
          exact
          path={[path1, path2]}
          component={component}
        />
Нишант Сингх
источник