Пользовательские динамические маршруты, использующие реагирующий маршрутизатор

Question

Существует небольшое требование нетрадиционных маршрутов для проекта, над которым я работаю.Маршрут имеет следующую структуру /<--name-->-abc-xyz-<--id-->, где имя и идентификатор являются динамическими.Теперь я хочу сопоставить этот маршрут, используя реагирующий маршрутизатор.Поэтому я сделал следующее

<Route path='/:name-abc-xyz-:id' component={View} />

Это не работает в тех случаях, когда имя имя имеет эту форму def-abc-xyz - *.

Как это исправитьтакой, что я получаю значение name и id в компоненте View напрямую.

У меня есть обходной путь, где я делаю <Route path='/:dynamicId' component={View} />

и теперь я анализирую dynamicId и извлекаю из него имя и идентификатор вмоя точка зрения.Есть ли способ добиться следующего без разбора?

Answer 1

Стандартная маршрутизация

Стандартным способом управления этим в V4 является предоставление маршрута в конфигурации следующим образом:

/:name/abc-xyz/:id

Если другой синтаксический анализатор не ограничивает вас в использовании вышеуказанногоdashed-schema - это решение будет соответствовать вашим потребностям.

Ref: https://github.com/reacttraining/react-router/tree/master/packages/react-router-config#route-configuration-shape

, если у вас есть конфликт со статическими маршрутами, поместите динамический маршрут последним в леса маршрутов

Ref:https://tylermcginnis.com/react-router-ambiguous-matches/

Пользовательские форматы маршрутов

Дополнительно, уведомление

React Router использует path-to-regexp для сопоставления своего маршрута.

Это означает, что если вы предоставите маршрут в этом формате:

/:name(\w+-)?abc-xyz(\w+-)?:id

Это будет работать и при сравнении (IE)

def-abc-xyz-12

Снимок экрана из Тестер маршрута

Ссылка: https://github.com/ReactTraining/react-router/issues/5536#issuecomment-330548834

Тестер маршрута: https://pshrmn.github.io/route-tester/#/def-abc-xyz-12