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)に置き換わって表示されます。