Проблема с роутингом в React
 

Если в кратце, проблема возникает из за того что когда заходим на страницу,
текущий урл страницы изначально
http://localhost:3004/tablets/tablet_1
Если мы покликаем по табам (у которых реализован роутинг)
То урл будет менять свое значение например на
http://localhost:3004/tablets/tablet_1/characteristics
И вот, допустим у нас сейчас этот урл и если страница перезагрзиться, то реакт будет считать что текущий урл уже
http://localhost:3004/tablets/tablet_1/characteristics
а не
http://localhost:3004/tablets/tablet_1 как предполагается
И из за этого возникают проблемы
Могут быть вот такие страницы
localhost:3004/tablets/tablet_1/characteristics/characteristics

А так быть не должно. Подскажите как решить такую проблему


Если подробнее:
Делаю Интернет-магазин на Реакте (в рамках учебного проекта)
На данный момент сделал роуты для нескольких страниц

<Route path="/" ... /> // главная страница
<Route path="/tablets"  ... />  // страница категорий
<Route path="/tablets/:id"  ... /> // детальная страница товара

И это все работает хорошо

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

<Route path="/tablets/:id/characteristics"  ... />
<Route path="/tablets/:id/opinion"  ... />
<Route path="/tablets/:id"  ... /> // по дефолту

Пути у табов:

to=`${ текущий урл страницы }/characteristics` // Таб "Характеристки"
to=`${ текущий урл страницы }/opinion` // Таб Отзывы
to=`${ текущий урл страницы }` // Таб "Описание" (по дефолту)

http://skrinshoter.ru/s/221019/1f36Q0Gw

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

А при перезагрузке страницы текущий адрес получается уже
а не
как задумывалось.
Из-за этого возникают проблемы когда кликаешь по табам:
адрес получается уже
http://localhost:3004/tablets/tablet...cteristics</b>
http://skrinshoter.ru/s/221019/eTe8ZW5F

Вот в этом и проблема. Как такое решить?
Дело в том что location.pathname я передаю через props дочернему компоненту, он принимает его и в state я добавляю ему

`${ this.props.pathName }/characteristics`

Вот код, как это выглядит:

class App extends Component {
  render() {
    <Switch>

        <Route path="/" exact={true} component={ CategoriesList }/>

      <Route path="/tablets/:id/characteristics"
        render={ ({ match, location }) => {
          const { id } = match.params;
          return <DetailPage itemId={ id } currentTab="characteristics" pathName={ location.pathname } />
        }}/>

      <Route path="/tablets/:id/opinion"
        render={ ({ match, location }) => {
          const { id } = match.params;
          return <DetailPage itemId={ id } currentTab="opinion" pathName={ location.pathname } />
        }}/>

      <Route path="/tablets/:id"
        render={ ({ match, location }) => {
          const { id } = match.params;
          return <DetailPage itemId={ id } currentTab="description" pathName={ location.pathname } />
        }}/>

      <Route path="/tablets"
        render={({ location }) =>
          <CategoryPage
            goodList={goodsList.tablets}
            title="Tablets"
            location={ location }
            exact={true}
            />}
      />
    </Switch>

  }
}





class DetailPage extends Component {
  state = {
    tabs: {
      opinion: {
        tabId: 'opinionTab',
        tabTitle: 'Отзывы',
        tabPathTo: `${ this.props.pathName }/opinion`,
        tabContent: 'Контент отзывов'
      },
      characteristics: {
        tabId: 'characteristicsTab',
        tabTitle: 'Характеристики',
        tabPathTo: `${ this.props.pathName }/characteristics`,
        tabContent: 'Контент Характеристик'
      },
      description: {
        tabId: 'descriptionTab',
        tabTitle: 'Описание',
        tabPathTo: `${ this.props.pathName }`,
        tabContent: 'Контент описания'
      }
    }
  };

  findCurrentGood(goodsList, itemId) {
    for (let key in goodsList) {
      goodsList[key].forEach(category => {
        if (category.id === itemId) {
          this.currentGood = category
        }
      })
    }
  }

  findCurrentTab() {
    for (let key in this.state.tabs) {
      if (key === this.props.currentTab) {
        this.activeTab = this.state.tabs[key];
      }
    }
  }

  render() {
    const { goodsList, itemId, currentTab, pathName } = this.props;
    const { tabs } = this.state;
    this.findCurrentGood(goodsList, itemId);
    this.findCurrentTab();
    
    
    return() {
      <div className="tabs">
            <div className="tabs__menu">
              {
                Object.keys(tabs).map(tab => {
                  const tabClass = classNames('tabs__link', {
                    'tabs__link--active' : tab === currentTab
                  });

                  return (
                    <Link key={ tabs[tab].tabId }
                          to={  tabs[tab].tabPathTo }
                          className={ tabClass } >
                      { tabs[tab].tabTitle }
                    </Link>
                  )
                })
              }
            </div>
            <div className="tabs__content">

              <h3 className="info__title">{ this.activeTab.tabTitle }</h3>
              <div className="info__text">
                { this.activeTab.tabContent }
              </div>

            </div>
          </div>
    }
  }
}

https://reacttraining.com/react-rout...xample/nesting

по предоставленному коду - написано неправильно )

this.findCurrentGood(goodsList, itemId);
this.findCurrentTab();

это дичь )

return <DetailPage itemId={ id } currentTab="characteristics" pathName={ location.pathname } />
...
return <DetailPage itemId={ id } currentTab="opinion" pathName={ location.pathname } />
...
return <DetailPage itemId={ id } currentTab="description" pathName={ location.pathname } />

это тоже дичь, заведи отдельные компоненты...
табы тоже завернуть в отдельный компонент...