React×Typescriptにおけるmaterial-uiのtabの挙動がおかしい

Question

#解決したいこと
現在React×Typescript×styled-components×material-uiでポートフォリオサイトを作ろうと考えています。
matterial-uiのTab,Tabs,AppBarを用いてヘッダーをを作成できたのですが、サイトのホームから他のタブに移る際の動作がおかしいです。
この問題に関連していそうなソースを一応載せておきます

import { ComponentRouter } from "./router/ComponentRouter";
import { StylesProvider } from '@material-ui/styles';
import {MuiThemeProvider} from '@material-ui/core/styles'

import {theme} from './assets/styles/theme'

export function App (){
  return (
    <StylesProvider injectFirst>
      <MuiThemeProvider theme={theme}>
        <ComponentRouter />
      </MuiThemeProvider>
    </StylesProvider>
  );
};

import { BrowserRouter, Route, Switch } from "react-router-dom";
import { FC } from "react";
import { DefaultLayout } from "../components/templates/DefaultLayout";
import { HeaderOnly } from "../components/templates/HeaderOnly";
import { Home } from "../components/pages/Home";
import { Profile } from "../components/pages/Profile";
import { Skill } from "../components/pages/Skill";
import { Product } from "../components/pages/Product";
import { Book } from "../components/pages/study/Book";
import { Contact } from "../components/pages/Contact";

export const Path = {
    home: "/",
    profile: "/profile",
    skill: "/skill",
    product: "/product",
    study: "/book",
    contact: "/contact",
  };


export const ComponentRouter:FC = () =>{
    return (
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <Switch>
          <Route exact path={Path.home}>
            <DefaultLayout>
              <Home />
            </DefaultLayout>
          </Route>
          <Route path={Path.profile}>
            <HeaderOnly>
              <Profile />
            </HeaderOnly>
          </Route>
          <Route path={Path.skill}>
            <HeaderOnly>
              <Skill />
            </HeaderOnly>
          </Route>
          <Route path={Path.product}>
            <HeaderOnly>
              <Product />
            </HeaderOnly>
          </Route>
          <Route path={Path.study}>
            <HeaderOnly>
              <Book />
            </HeaderOnly>
          </Route>
          <Route path={Path.contact}>
            <HeaderOnly>
              <Contact />
            </HeaderOnly>
          </Route>
        </Switch>
      </BrowserRouter>
    );
}

import styled from "styled-components";
import {VFC, } from "react";
import { Link, useHistory} from "react-router-dom";

import { Tab, Tabs, AppBar } from "@material-ui/core";

interface headerItemPropsType{
  id: number; 
  route: string; 
  label: string 
}
const headerItem: headerItemPropsType[] = [
  {
    id: 1,
    route: "/",
    label: "HOME",
  },
  {
    id: 2,
    route: "/profile",
    label: "PROFILE",
  },
  {
    id: 3,
    route: "/skill",
    label: "SKILL",
  },
  {
    id: 4,
    route: "/product",
    label: "PRODUCT",
  },
  {
    id: 5,
    route: "/book",
    label: "STUDY",
  },
  {
    id: 6,
    route: "/contact",
    label: "CONTACT",
  },
];

export const Header: VFC = () => {
  const history = useHistory();
  return (
      <SAppBar position="static" color="inherit">
        <Tabs
          value={history.location.pathname}
          variant="fullWidth"
          indicatorColor="secondary"
          centered
          aria-label="simple tabs example"
        >
          {headerItem.map((val) => {
            return (
              <Tab
                label={val.label}
                value={val.route}
                key={val.id}
                component={Link}
                to={val.route}
              />
            );
          })}
        </Tabs>
      </SAppBar>
  );
};
const SAppBar = styled(AppBar)`
  background: #193278;
  color: #fff;
  padding: 8px 0;
`;

#質問内容

公開しているサイトのHOMEから他のタブに移動（書き換え）する際のみ、インジケータが滑らかに移動しません。
これがなぜなのか分かる方がいらっしゃれば回答いただけるとありがたいです。

#やったこと
material-uiのドキュメントも見たのですが、分かりませんでした。
stateを用いて書いてみたり、useLocationをしたりしたのですが変わりませんでした。
そもそもなぜインジケータが滑らかに移動しているのかがmaterial-uiにブラックボックス化されているので原因が全く分かりません。
よろしくお願いします。

Comments

[anozon]

<Tabs の部分で
`history.location.pathname` が "/" と想定している部分で "" が返ってきているという可能性はどうですか？

[it-tsumugi]

console.log()で確認しましたが"/"が返ってきていました。

[anozon]

一旦 / を無くして /top にしてみるのはどうですか？
あとはタブの順序を変えるなど

[it-tsumugi]

/topにしたらホームは映らなくなりました。
順番を変えても直りません。homeから他のタブ、他のタブからhomeへの移動がやはりスムーズにいきません。

Answer 1

ルート内にそれぞれヘッダーを書いているため、タブをクリックする度にヘッダ部分も再描画(再配置)されていてなめらかに移動していないように見えるだけではないでしょうか？
HeaderはRoute外に設置して一度だけ配置されるようにするべきではないでしょうか。

Comments

[it-tsumugi]

直りました。ありがとうございます。
atomicDesignを意識した結果template内のコンポーネントで別々に配置してこうなってしまったのですが、通常ヘッダーは別に設置するものなのでしょうか。

[p19ljk]

ヘッダーをそれぞれProfileとかSkillに書かずにHeaderOnlyというコンポーネントに分割している、という点でAtomic Designは達成されています。(それぞれを別々に配置するかはAtomicDesignの範疇外?)

ヘッダは別設置ですねー。
それぞれのコンポーネントを表示エリアだと考え、そのエリアがどの親に属するのが正しいのかを意識すると良いのではないでしょうか。
今回の場合ですとProfileだったりSkillだったりがHeaderエリアの子であることが正しいのかというところですね。
ページの構造としてヘッダエリアとコンテンツエリアがあって、このコンテンツエリア部分がルータによって切り替わるというのが正しい構造だと思います。
元のソースだとページにヘッダエリアのみ存在してそのヘッダエリア内にコンテンツが配置されている。
そして、ルータでヘッダエリアまるごと切り替わるという形になっているので、やはり正しい構造ではないかと。
うまく説明できているかわかりませんが、ご参考までに。

[it-tsumugi]

分かりやすい解説でよく分かりました。
ありがとうございます。