React で画面遷移をしよう

今回は、React Router を使用して画面遷移を実装していきましょう。

Ver.3 と言うことで Ver.2 まだの方は是非みていただけばと思います。

実装

React Router の install

terminal で下記を実行し、install しましょう

npm i react-router-dom

遷移先ページの作成

とりあえず src配下に componentsディレクトリを作成し、Home.jsx を作成します。

そして内容は適当にこんな感じ

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 を用いたり、ヘッダーにグラデーションをつけてみましょう。

app.jsx

// 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の中身に関しては、まだないので文字だけ表示しておきます。)

ログイン画面に行くと、こんな感じになります。

ちょっと配色的に文字が見づらいのは、センスがないのでご容赦ください。

まとめ

それでは見た目系割と整ってきたかなと言うことで、
次は適当なフォームとか作ってみようと思います。
じゃあまた ˙︶˙)ﾉ"ﾏﾀﾈｰ

文系だけど React で 画面遷移実装してみた Ver.3