ReactでNavigationを実装する

Reactで複数の画面を定義し、各画面に共通のNavigationを実装したサンプルになります。
なお、Material UIを使用しています。

画面

3画面を定義します。
ここでは、ScreenA（src/ScreenA.js）、ScreenB（src/ScreenB.js）、ScreenC（src/ScreenC.js）を定義しました。

import React from 'react'
import Box from '@mui/material/Box'

const ScreenA = () => {
  return (
    <Box>
      ScreenA
    </Box>
  )
}
export default ScreenA

コンポーネント名とBox内のテキスト以外はScreenB、ScreenCも全く同じなので省略します。

Navigation

Navigationコンポーネントを定義します。
react-router-domを使いますので、次のコマンドでインストールします。

$ npm i react-router-dom

Navigationコンポーネントとしてsrc/navigation.jsを定義します。

import React from 'react'
import { Link } from 'react-router-dom'
import Button from '@mui/material/Button'
import Stack from '@mui/material/Stack'

const Navigation = (props) => {
  return (
    <Stack direction="row" spacing={2}>
      <Button
        variant="outlined"
        color="primary"
        component={Link}
        to="/a"
      >
        A
      </Button>
      <Button
        variant="outlined"
        color="primary"
        component={Link}
        to="/b"
      >
        B
      </Button>
      <Button
        variant="outlined"
        color="primary"
        component={Link}
        to="/c"
      >
        C
      </Button>
    </Stack>
  )
}
export default Navigation

Buttonのcomponentにreact-router-domのLinkコンポーネントを渡し、toにルーティングのパスを指定することで当該Buttonをクリック時に設定したパスへリンクする設定になります。

App.js

最後に画面全体の構造とルーティング設定をApp.jsに次のように定義しました。

import { BrowserRouter, Route, Routes } from 'react-router-dom'
import Navigation from './navigation.js'
import ScreenA from './ScreenA.js'
import ScreenB from './ScreenB.js'
import ScreenC from './ScreenC.js'
import Grid from '@mui/material/Grid'

function App() {
  return (
    <Grid container justifyContent="center" alignItems="center" direction="column">
      <BrowserRouter>
        <Navigation />
        <Routes>
          <Route path="/" element={<ScreenA />} />
          <Route path="/a" element={<ScreenA />} />
          <Route path="/b" element={<ScreenB />} />
          <Route path="/c" element={<ScreenC />} />
        </Routes>
      </BrowserRouter>
    </Grid>
  )
}

export default App;

Routesコンポーネントの中身が指定したパスに応じてルーティングされた各画面（ScreenA〜ScreenC）に置き換わって表示されます。