ReactのBottomNavigationでページ遷移

はじめに

マルチデバイス対応させたいため，スマホの時はBottomNavigationでページ遷移できたらいいなと思った．
muiのBottomNavigationを使用した．

今回使用したコンポーネント

export default function SearchTemplate({ isPhone }) {
  const navigate = useNavigate();
  const location = useLocation();

  const urlToValue = {
    "/": 0,
    "/products": 1,
    "/news": 2,
  };
  const value = urlToValue[location.pathname] || 0;

  const handleNavigation = (url) => {
    navigate(url);
  };

  if (isPhone) {
    return (
      <Paper
        sx={{ position: "fixed", bottom: 0, left: 0, right: 0 }}
        elevation={3}
      >
        <BottomNavigation showLabels value={value}>
          <BottomNavigationAction
            label="Bookmark"
            icon={<BookmarkIcon />}
            onClick={() => handleNavigation("/home")}
          />
          <BottomNavigationAction
            label="cook"
            icon={<ShoppingCartIcon />}
            onClick={() => handleNavigation("/products")}
          />
          <BottomNavigationAction
            label="News"
            icon={<NewspaperIcon />}
            onClick={() => handleNavigation("/news")}
          />
        </BottomNavigation>
      </Paper>
    );
  }
  return null;
}

解説

まず，JSXから解説．BottomNavigationタグで何番目のアクションが行われているかvalueで判定する．showLabelsでlabel表示．
BottomNavigationActionタグは，クリック時にhandleNavigationを呼び出してページ遷移．

        <BottomNavigation showLabels value={value}>
          <BottomNavigationAction
            label="Bookmark"
            icon={<BookmarkIcon />}
            onClick={() => handleNavigation("/home")}
          />
          <BottomNavigationAction
            label="cook"
            icon={<ShoppingCartIcon />}
            onClick={() => handleNavigation("/products")}
          />
          <BottomNavigationAction
            label="News"
            icon={<NewspaperIcon />}
            onClick={() => handleNavigation("/news")}
          />
        </BottomNavigation>

ページ遷移

navigateにurlを入れるとページ遷移する．

useNavigateはあまり推奨されていないため，loadersやactionsを使うべきとドキュメントに書いてたので．直す予定．2023/06/18の段階では動いた．

  const navigate = useNavigate();
  const handleNavigation = (url) => {
    navigate(url);
  };

現在のページ番号取得

useLocationで現在のドメインなどを取得できる．それと一致するページの番号をvalueに格納することで切り替えることができた．

これをしなければ，useNavigateでページ遷移したときに再レンダリングされるため，useStateで初期化された値が一度入ってしまう．そのため，2回押さなければ反映されなかった．．．😢

  const location = useLocation();
  const urlToValue = {
    "/home": 0,
    "/products": 1,
    "/news": 2,
  };
  const value = urlToValue[location.pathname] || 0;

参考