react Router Примеры работы

Соберем тут некоторые заметки, которые полезны для работы со вложенными маршрутизаторами

  • Получить строку маршрута, которому соответствует данный компонент:
    
    function ContractViewTabs(props) {
        const parentRoutePath = props.match.path;
    // ......
    
    
  • Параметр из URL по шаблону

    Если маршрут описан как-то так:

    <Route
      path={parentRoutePath + "/edit/:goods_id"}
      render={props =>
        <GoodsEdit  {...props} />}
     />
    

    то получить значение соответствующее :goods_id можно так:

    export default function GoodsEdit(props) {
    
     const itemId = props.match.params.goods_id;
    // ....