Поделиться компонентом на нескольких страницах Далее JS и избежать повторного рендеринга - PullRequest
0 голосов
/ 30 апреля 2020

Как уже упоминалось в заголовке, у меня есть компонент вкладок с несколькими ссылками.

tabs :

<AppBar color="default" position="relative">
  <Tabs indicatorColor="primary" textColor="primary" value={activeTab} onChange={handleTabChange}>
          {tabs.map((tab, i) => ( <Tab label={tab.label} id={`tab-${i}`} key={i} />))}
   </Tabs>
</AppBar>

У меня этот компонент вкладок размещен в макете, как этот

<Container>
   <TabsComponent />
   {children}
</Container>

Теперь на каждой странице я оборачиваю содержимое своей страницы этим макетом. Забыл упомянуть, что это вложенные маршруты.

Структура папки выглядит следующим образом:

settings

  • application.tsx -> содержит компонент макета

  • profile.tsx -> содержит компонент макета

    ...

Однако это решение повторно отображает компонент вкладки всякий раз, когда я переключить страницу. Есть ли способ, которым я могу предотвратить это.

...