Блог

Я использую react-router-dom, и в настоящее время это выглядит так:

 <Switch>
        <Route path={"/layouts/:layoutID"} component={Layouts} />
        <Route
          path={"/dashboard/:dashboardID"}
          component={Dashboards}
        />
</Switch>
  

Когда пользователь переходит к «/ dashboard /: dashboardID» внутри этого компонента, он может выбрать подстраницу onClick, и я хочу, чтобы структура URL была «/ dashboard /: dashboardID /: pageID», pageID перейдет к «PageIdComponent», этот компонент получит реквизит «match» и будетпоказать идентификатор страницы

Пожалуйста, посмотрите прикрепленный файл, который показывает необходимую структуру.

Каков наилучший способ его реализации?

Если у вас есть дочерний маршрут внутри вашего компонента панели мониторинга, вы можете использовать это match.path значение для создания дополнительного маршрута:

 <Route path={`${props.match.path}/:dashboardId`}>} component={SubDashboard} />
  

чтобы путь соответствовал тому, что было у родительского, а затем добавьте новую переменную поверх этого.

Затем вы можете перейти к нему, используя match.url , чтобы создать ссылку на текущий URL-адрес и добавить к нему подстраницу:

 <Link to={`${props.match.url}/pageFour`}>Page four</Link>
  

Вместо того, чтобы использовать prop driling, React Router предлагает способы получения соответствующих реквизитов для любых компонентов, которые вы хотите, с помощью withRouter HOC или различных перехватов. Перехваты были введены в версии 5.1

Чтобы получить совпадение с помощью перехвата, вы можете использовать const match = useRouteMatch()

Чтобы получить соответствующие реквизиты через HOC:

 const Example = useRouteMatch(function Example({ match, location, history }) {
  return <div>{match.url}</div>;
});
  

Для маршрутизатора react версии 6 (это скоро):

https://reacttraining.com/blog/react-router-v6-pre/#nested-routes-and-layouts