Если в кратце, проблема возникает из за того что когда заходим на страницу,
текущий урл страницы изначально
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_1/characteristics |
И потом вдруг страницу перезагрузили
А при перезагрузке страницы текущий адрес получается уже
|
Код:
|
http://localhost:3004/tablets/tablet_1/characteristics |
а не
|
Код:
|
http://localhost:3004/tablets/tablet_1 |
как задумывалось.
Из-за этого возникают проблемы когда кликаешь по табам:
адрес получается уже
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>
}
}
}
