Блог

Главная - Вопросы по программированию - Корректная синхронизация материала — компонент вкладки пользовательского интерфейса с маршрутизатором React и вложенными вкладками

Корректная синхронизация материала — компонент вкладки пользовательского интерфейса с маршрутизатором React и вложенными вкладками

#reactjs #react-router #material-ui

#reactjs #react-маршрутизатор #материал-пользовательский интерфейс

Вопрос:

Я читал много прошлых вопросов и ответов, а также постоянно экспериментировал, но мне кажется, что я, возможно, лаю по неправильному пути…

Если бы у меня была страница, содержащая вкладки, подобные этой:

 <Tabs value={location.pathname.substring(location.pathname.lastIndexOf('/') == -1 ? 0 : location.pathname.lastIndexOf('/'))}>
  <Tab label="Tab 1" value='/tab1' />
  <Tab label="Tab 2" value='/tab2'>
     <Tab2Contents />
  </Tab>
</Tabs>

function Tab2Contents(){
   
   return (<Tabs value={location.pathname.substring(location.pathname.lastIndexOf('/') == -1 ? 0 : location.pathname.lastIndexOf('/'))}>
  <Tab label="Detail" value='/detail' />
  <Tab label="Info" value='/info'>
     <Tab2Contents />
  </Tab>
</Tabs>)
}

Однако это может сработать в упрощенном случае, если структура пути становится глубже, поэтому она больше не просто:

http://somewebsite/home/tab2

Скорее Tab2Contents заканчивает тем, что имеет список элементов, и когда вы нажимаете на элемент, он показывает сведения об элементе, сгруппированном в другой набор вкладок, который даст структуру пути, например:

http://somewebsite/home/tab2/details

Очевидно, что основной набор вкладок (Tab1, Tab2) больше не будет соответствовать правильно.

Есть ли вообще способ решить эту проблему? Кажется, что каждое онлайн-решение требует обработки щелчков по вкладкам для установки состояний, но, очевидно, это работает не слишком хорошо, если кто-то должен перейти по этому URL, он ожидает, что обе вкладки домашней страницы будут выделены вместе с вкладкой Сведений.

Комментарии:

1. Мне нужно было бы увидеть больше того, что вы пытаетесь сделать, чтобы сделать лучшее предложение. Сказав это, чего вы в конечном итоге пытаетесь достичь? Вероятно, вам следует начать с сохранения вашего значения в состоянии.

2. Предоставьте нам минимальный и полный пример кода вашей проблемы. Я не вижу никакого кода вложенных вкладок, но заголовок вопроса говорит об этом. Я не хочу делать предположения о вашем коде.

3. @andrewkeithly Чего я пытаюсь добиться, так это того, что на главной странице были вкладки, затем на одной из вкладок у нее будет другой набор вкладок, я обновил свой вопрос об этом.

4. @AjeetShah обновил его, как вы можете видеть, Tab2Contents возвращает другой набор вкладок, но теперь URL-адрес будет чем-то вроде somewebsite/home / tab2 /detail , что заставляет родительскую вкладку прерываться при выборе значения для вкладок.

5. Не используйте location.pathname.substring , вместо этого используйте параметры URL или параметры поиска .