Дом маршрутизатора ReactJS. Динамические маршруты с регулярным выражением

В настоящее время я немного играю с React Router Dom, и я задаюсь вопросом, возможно ли иметь некоторые динамические маршруты.

Я знаю, что у меня может быть динамическая маршрутизация со следующим:

<Route path="/component/:param" component={Component} />

Я хотел бы иметь следующее:

Например. У меня есть страница фильтра. На этой странице у меня есть следующие фильтры:

Область

  • Флорида
  • Майами
  • Нью-Йорк

Интересы

  • Веб-разработка
  • Социальные сети
  • Маркетинг

Уровень

  • Новичок
  • Средний
  • Передовой

и т. д.

Мой URL-адрес должен быть следующим: когда я выбираю Флориду в качестве области, Веб-разработка и Социальные сети в качестве интересов и Новичок в качестве уровня, следующее

/component/filter/areas/florida/interests/webdevelopment;social-media/levels/beginner

Выше просто с:

<Route path="/component/filter/areas/:areas/interests/:interests/levels/:levels" component={Component} />

Но также возможно, что это так:

/component/filter/interests/webdevelopment;social-media

or

/component/filter/areas/new-york

or

/component/filter/interests/webdevelopment;social-media/areas/new-york

Возможно ли иметь 1 (или 2) маршрута с путем /component для всех элементов и путем для фильтров без необходимости определять для него все разные пути? Потому что, когда у меня есть, например, 50 фильтров, я действительно не хочу иметь 1000+ строк только для моих фильтров.

Заранее спасибо за ваши ответы!


reactjs javascript react-router-dom react-router-v4
person Danny    schedule 17.03.2018    source источник
comment
этот шаблон URL странный. Очевидно, что area, interests и levels должны быть в строке запроса. например: "/component/filter?area=${encodeURLComponent(areas)}&interests=${encodeURLComponent(interests)}&levels=${encodeURLComponent(levels)}"   -  person FisNaN    schedule 17.03.2018
comment
Можете ли вы сказать мне, почему это странно? На мой взгляд, это очень удобно для поисковых систем, и я мог бы создать описание каждого фильтра над результатами. - Найдите встречи по веб-разработке в Нью-Йорке - Найдите встречи в социальных сетях во Флориде и т. д.   -  person Danny    schedule 17.03.2018
comment
Потому что все условия фильтра, которые у вас есть, находятся на одном уровне (нет отношений родитель-потомок). Если вы извлекаете значение из строки запроса, порядок и отсутствующее значение не имеют значения. Но в вашем URL-адресе вам нужно указать отдельный маршрут, если отсутствует areas или interests.   -  person FisNaN    schedule 17.03.2018
comment
Просто используйте локальное хранилище   -  person digit    schedule 17.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Если у вас есть несколько фильтров, которые являются необязательными, вы можете определить такие маршруты, как

<Route path="/component/filter(/areas/:areas)?(/interests/:interests)?(/levels/:levels)?" component={Component} />

Однако для большого количества фильтров действительно не имеет смысла использовать фильтры в качестве параметров URL, вместо этого вам следует использовать параметры запроса, такие как

and you URL could be like

`?areas=new-york&interests=webdevelopment,socialmedia&levels=1`

который вы затем можете проанализировать в компоненте.

P.S. указанный выше URL должен быть закодирован

Проверьте этот ответ на как интегрировать и обнаруживать изменение параметров запроса с помощью react-router-v4

person Shubham Khatri    schedule 17.03.2018