дент

https://codesandbox.io/s/rr00y9w2wm

Действия по воспроизведениюНажмите натемыНажмите наРендеринг с React

ИЛИ ЖЕ

Перейти кhttps://rr00y9w2wm.codesandbox.io/topics/renderingОжидаемое поведениеmatch.params.topicId должен быть одинаковым от обоих родителейтемы компонент должен быть таким же, какmatch.params.topicId при доступе вТема составная частьФактическое поведениеmatch.params.topicId при доступе вТема компонентне определеноmatch.params.topicId при доступе втемы компонентоказание

Я понимаю изэтот закрытый вопрос что это не обязательно ошибка.

Это требование очень распространено среди пользователей, которые хотят создать прогон в обычном веб-приложении, где компонентTopics на родительском уровне должен получить доступ кmatch.params.paramId гдеparamId является параметром URL, который соответствует вложенному (дочернему) компонентуTopic:

const Topic = ({ match }) => (
  <div>
    <h2>Topic ID param from Topic Components</h2>
    <h3>{match.params.topicId}</h3>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <h3>{match.params.topicId || "undefined"}</h3>
    <Route path={`${match.url}/:topicId`} component={Topic} />
    ...
  </div>
);

В общем смыслеTopics может быть компонентом «Ящик» или «Меню навигации» иTopic это может быть любой дочерний компонент, как в приложении, которое я разрабатываю. Дочерний компонент имеет свой собственный:topicId параметр, который имеет свой собственный (скажем)<Route path="sections/:sectionId" component={Section} /> Route / Component.

Еще более болезненным является то, что меню навигации не должно иметь однозначного отношения к дереву компонентов. Иногда пункты на корневом уровне меню (скажем,Topics, Sections и т. д.) может соответствоватьвложенными структура (Sections отображается только под темой,/topics/:topicId/sections/:sectionId хотя у него есть собственный нормализованный список, который доступен пользователю под заголовкомРазделы в панели навигации). Поэтому, когдаРазделы нажата,Это должны быть выделены, а не обаРазделы а также темы.

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

Я вообще не являюсь экспертом в React Router, поэтому, если кто-нибудь сможет найти правильное элегантное решение для этого варианта использования, я считаю это плодотворным делом. И под элегантным я имею в виду

Пользыmatch и нетhistory.location.pathnameНе требует хакерских подходов, таких как ручной анализwindow.location.xxxНе используетthis.props.location.pathnameНе использует сторонние библиотеки, такие какpath-to-regexpНе использует параметры запроса

Другие хаки / частичные решения / связанные вопросы:

React Router v4 - Как получить текущий маршрут?

React Router v4 global не соответствует вложенным маршрутным дочерним элементам

ТИА!