Настройка React Router для «неограниченных» параметров

Question

Я пытаюсь реализовать React Router таким образом, чтобы он поддерживал такой маршрут:

/myPages/:pageName1/:pageName2/:pageName3/...

Идея состоит в том, что, хотя отображаемая страница является только последней страницей, страницы вложены, и глубина не является предопределенной. Компонент, который отображает реальную страницу, должен знать имена родительских страниц.

Чтобы уточнить, идея состоит в том, что данные страницы в бэкэнде находятся в древовидной структуре таким образом, что в приведенном выше примере страница 1 является корневой страницей, страница 2 является дочерней по отношению к странице 1, страница 3 является потомок страницы 2 и т. д. Кроме того, одна страница может иметь несколько дочерних элементов. Последнее дочернее имя (например, pageName3 в примере) - это то, что используется для запроса к базе данных и получения всего содержимого, необходимого для отображения полной страницы. Имена родителей требуются для отображения подкомпонента, связанного с навигацией. Я должен также упомянуть, что просто иметь /myPages/:pageName3 и получать все родительские имена из бэкэнда - это не вариант. Я мог бы извлечь эту информацию из бэкэнда, но URL, представленный пользователю, все еще должен иметь эту структуру.

Я надеюсь, что есть способ получить этот тип информации в виде массива, но мне трудно найти подобный пример в Интернете.

Answer 1

может быть, это может помочь.

https://github.com/ReactTraining/react-router/blob/d28d46dce08a5756a085f7e5eebb5169ea59e40b/packages/react-router/docs/api/Redirect.md#from-string

говорится:

Путь для перенаправления. Любой действительный URL-путь, который понимает path-to-regexp@^1.7.0.

может быть, вы можете объединить <Redirect from='/users/:id' to='/users/profile/:id'/>

с

var re = pathToRegexp('/:foo+', keys) (взято из https://github.com/pillarjs/path-to-regexp/tree/v1.7.0#one-or-more)

тогда вы получите
<Redirect from='/:pageName+/:id' to='/:id'/>