React で画面遷移をしよう
今回は、React Router
を使用して画面遷移を実装していきましょう。
Ver.3 と言うことで Ver.2 まだの方は是非みていただけばと思います。
実装
React Router の install
terminal で下記を実行し、install しましょう
npm i react-router-dom
遷移先ページの作成
とりあえず src配下に components
ディレクトリを作成し、Home.jsx
を作成します。
そして内容は適当にこんな感じ
import React from 'react'
export const Home = () => {
return (
<div>Home</div>
)
}
邪魔なので、作成済みのLoginページをcomponents 配下に移動する。
src/components/Login.jsx
import { Box, Button, Paper, TextField, Typography } from '@mui/material';
export const Login = () => {
return (
<>
<Paper
elevation={3}
sx={{
borderRadius: 6,
p: 4,
height: '70vh',
width: '280px',
m: '20px auto',
}}
>
<Box
mt={8}
display='flex'
flexDirection='column'
gap={5}
alignItems='center'
>
<Typography variant='h5'>ログイン画面</Typography>
<TextField
type='id'
name='user_id'
variant='standard'
placeholder='ユーザーIDを入力してください'
fullWidth
/>
<TextField
type='password'
name='password'
variant='standard'
placeholder='パスワードを入力してください'
fullWidth
/>
<Button type='submit' color='primary' variant='contained' fullWidth>
ログイン
</Button>
</Box>
</Paper>
</>
);
}
React Router 使ってみる
// react-router-domのインポート
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
// 作成済みコンポーネントのインポート
import { Home } from './components/Home';
import { Login } from './components/Login';
function App() {
return (
<BrowserRouter>
<div className='App'>
<Link to='/'>Home</Link>
<br />
<Link to='/login'>Login</Link>
<Routes>
{/* exact をつけると完全一致になる */}
<Route exact path='/' element={<Home />} />
<Route path='/login' element={<Login />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
こんな感じで左上クリックすると画面遷移させることができました。
詰まったとこ
前触った時はこんな感じで実装していたんですが、
<Switch>
<Route exact path='/'>
<Home />
</Route>
<Route path='/page1'>
<Page1 />
</Route>
<Route path='/page2'>
<Page2 />
</Route>
<Route path='/page3'>
<Page3 />
</Route>
</Switch>;
下記エラーが出ちゃって
I don't know why I am getting this error and I can't find an answer for it anywhere. I have uninstalled the react-router-dom package and reinstalled it, but it continues to tell me that the switch module is not exported from react-router-dom. Here's my code.
stackoverflow 曰く version up に伴って Switch
の名前が変わったり
下記のように、Route への element の渡し方も変わってきたようです。
<Route exact path="/" element={<Home/>}/>
綺麗にしよう
とりあえずざっくり画面ができたので綺麗にしてみます。
今回はいい感じにヘッダーとして使用させます。
muiのapp-bar を使用してみましょう。
Icon を用いたり、ヘッダーにグラデーションをつけてみましょう。
// react-router-domのインポート
import { BrowserRouter, Link, Routes, Route } from 'react-router-dom';
import HomeIcon from '@mui/icons-material/Home';
import { makeStyles } from '@material-ui/core/styles';
import {
AppBar,
Box,
Toolbar,
Typography,
Button,
IconButton,
} from '@mui/material';
// 作成済みコンポーネントのインポート
import { Home } from './components/Home';
import { Login } from './components/Login';
const useStyles = makeStyles({
root: {
background: 'linear-gradient(45deg, #84fab0 30%, #8fd3f4 90%)',
border: 0,
borderRadius: 3,
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
color: 'white',
height: 63,
padding: '0 30px',
},
});
function App() {
const classes = useStyles();
return (
<BrowserRouter>
<div className='App'>
<Box sx={{ flexGrow: 1 }}>
<AppBar className={classes.root} position='static'>
<Toolbar>
<Link to='/'>
<IconButton>
<HomeIcon />
</IconButton>
</Link>
<Typography ml={2} variant='h6' sx={{ flexGrow: 1 }}>
test app
</Typography>
<Button color='inherit' href='/login'>
Login
</Button>
</Toolbar>
</AppBar>
</Box>
<Routes>
{/* exact をつけると完全一致になる */}
<Route exact path='/' element={<Home />} />
<Route path='/login' element={<Login />} />
</Routes>
</div>
</BrowserRouter>
);
}
export default App;
はい、実装後の画面がこんな感じです。
(Homeの中身に関しては、まだないので文字だけ表示しておきます。)
ログイン画面に行くと、こんな感じになります。
ちょっと配色的に文字が見づらいのは、センスがないのでご容赦ください。
まとめ
それでは見た目系割と整ってきたかなと言うことで、
次は適当なフォームとか作ってみようと思います。
じゃあまた ˙︶˙)ノ"マタネー