Reactで常に表示されるメニューバーを作る方法

目的

Reactアプリで、ページ遷移しても**常に下に表示され続けるメニューバー（ナビゲーション）**を作る方法を解説します。

---

基本構成

App.jsx
├── <Routes> （ページ切り替え）
└── <FooterMenu /> （常に表示されるメニューバー）

---

FooterMenuコンポーネントの例

components/FooterMenu.jsx

import { Link } from 'react-router-dom';

function FooterMenu() {
  return (
    <div style={{
      position: 'fixed',
      bottom: 0,
      left: 0,
      right: 0,
      height: '60px',
      background: '#eee',
      display: 'flex',
      justifyContent: 'space-around',
      alignItems: 'center',
      borderTop: '1px solid #ccc'
    }}>
      <Link to="/">ホーム</Link>
      <Link to="/search">検索</Link>
      <Link to="/mypage">マイページ</Link>
    </div>
  );
}

export default FooterMenu;

---

App.jsxで共通表示させる方法

App.jsx

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Search from './pages/Search';
import MyPage from './pages/MyPage';
import FooterMenu from './components/FooterMenu';

function App() {
  return (
    <BrowserRouter>
      <div style={{ paddingBottom: '60px' }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/search" element={<Search />} />
          <Route path="/mypage" element={<MyPage />} />
        </Routes>
        <FooterMenu />
      </div>
    </BrowserRouter>
  );
}

export default App;

※ paddingBottom: '60px' を入れておかないと、下のコンテンツがメニューに隠れてしまう。

---

なぜApp.jsxに書くのか？

各ページに書くと…

• 毎ページに <FooterMenu /> を書く必要がある
• ページ遷移すると再描画・再実行される

App.jsxに書けば…

• 1回だけ書けば全ページに表示される
• ページ遷移しても 消えない

---

まとめ

• どのページでも同じメニューが表示される
• 表示を切り替えるのは <Routes> だけなので、構成がわかりやすい
• 将来的にメニュー内容を更新するのも1か所でOK
• スマホアプリのようなUIが作れる

---

応用したい場合

• react-icons でアイコンを追加
• useLocation() を使って現在のページをハイライト
• Layoutコンポーネント を使って共通レイアウトにまとめる

---