• ×   Pasted as rich text.   Paste as plain text instead

      Only 75 emoji are allowed.

    ×   Your link has been automatically embedded.   Display as a link instead

    ×   Your previous content has been restored.   Clear editor

    ×   You cannot paste images directly. Upload or insert images from URL.

  • Member Statistics

    46,511
    Total Members
    3,128
    Most Online
    anasteisa
    Newest Member
    anasteisa
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Если в кратце, проблема возникает из за того что когда заходим на страницу изначально текущий урл страницы
      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 А так быть не должно. Подскажите как решить такую проблему
      Если подробнее:
      Делаю Интернет-магазин на Реакте (в рамках учебного проекта)
      На данный момент сделал роуты для нескольких страниц 
      [JS]
      <Route path="/" ... /> // главная страница
      <Route path="/tablets"  ... />  // страница категорий
      <Route path="/tablets/:id"  ... /> // детальная страница товара
      [/JS]
      И это все работает хорошо Проблема с роутингом началась когда я начал делать табы на детальной странице товара. Их я тоже хотел сделать через роутинг.
      [JS]
      <Route path="/tablets/:id/characteristics"  ... />
      <Route path="/tablets/:id/opinion"  ... />
      <Route path="/tablets/:id"  ... /> // по дефолту
      [/JS]
      Пути у табов:
      [JS]
      to=`${ текущий урл страницы }/characteristics` // Таб "Характеристки"
      to=`${ текущий урл страницы }/opinion` // Таб Отзывы
      to=`${ текущий урл страницы }` // Таб "Описание" (по дефолту)
      [/JS] 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_1/characteristics/characteristics     http://skrinshoter.ru/s/221019/eTe8ZW5F Вот в этом и проблема. Как такое решить?
      Дело в том что location.pathname я передаю через props дочернему компоненту, он принимает его и в state я добавляю ему
      [JS]`${ this.props.pathName }/characteristics`[/JS]Вот код, как это выглядит:
        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>     }   } }  
    • Создали Landing Page на тематику "Межевание земельного участка" Сделано: - С нуля разработана концепция и структура Landing page;
      - Разработан стильный и современный дизайн;
      - Наполнили контентом;
      - Качественная верстка и программирование сайта (быстрая загрузка, чистый, валидный код);
      - Подобрали хостинг и домен для клиента, установили и настроили сайт, установили админку Клиент на выходе получил полностью готовый для работы Landing Page Срок изготовления - 2 недели Если вам нужен качественно представить свою услугу, товары или компанию пишите по контактам ниже, сделаем вам крутой веб-ресурс, будь то Landing Page, Сайт многостраничник, Интернет-магазин.
      По невысокой цене и разумные сроки
      Контакты: Телеграм: @Nikker
      Скайп: smo_perviy
      E-Mail: Golllandec@gmail.com    
    • Здравствуйте. Предоставьте, пожалуйста, ссылку на сайт
  • Popular Contributors