ReactRouter: захват части пути и одновременное указание значения

Question

У меня есть путь в формате /somePath/:name, где :name должна быть одной из известных строк. Я прочитал, что компонент Route поддерживает массив URL-адресов для сопоставления, поэтому легко создать список поддерживаемых путей, но это лишает удобства автоматического захвата части пути.

Например, В настоящее время у меня есть компонент Route, определенный следующим образом.

<Route exact path={SomeKnownNames.map(n => `/somePath/${n}`)} component={SomeRoute} />} />

Это должно работать, но я больше не могу получить доступ к значению в props.match.params в компоненте Route. Есть ли способ добиться этого без ручного анализа URL-адреса?

Позвольте мне добавить, что я НЕ хочу совпадать, если значение :name отсутствует в известных строках.

I использую response-router-dom v5.

Answer 1

Очевидно, это работает:

<Route exact path={SomeKnownNames.map(n => `/somePath/:name(${n})`)} component={SomeRoute} />} />

т.е. если вы делаете /somePath/:name(foo), то оно соответствует /somePath/foo, и foo фиксируется в props.match.params.name в компоненте маршрута.

Answer 2

Вы пытались сделать это:

path={SomeKnownNames.map(n => `/somePath/:${n}`)}

Добавление : позволяет именам рассматриваться как параметры. Попробуйте, дайте мне знать, если это не связано. Возможно, мне понадобится дополнительная информация, чтобы лучше ответить на ваш вопрос.

Также попробуйте использовать хук useParams () из React Router. Что это показывает в вашем компоненте?