【React.js】React-Router-Domを使ってページの遷移を行う

はじめに

こんにちは、がんがんです。

前回まではMaterial-UIを用いて実装を行っていました。
gangannikki.hatenadiary.jp

せっかくならログイン -> Homeの画面へ遷移というよくあるアプリの動作をさせてみたいなと思いました。
そこで今回はReact-Routerについて触ってみたいと思います。

目次

目的

• React-Routerの挙動を理解する
• ログインページの作成・ページの遷移を行えるようにする

参考

reacttraining.com

qiita.com

qiita.com

react-routerのインストール

まずはインストールを行います。

$ npm install --save react-router-dom

やってみたこと1：Switch-Routeでルーティング

まずはBrowserRouterを使ったルーティングをやってみました。

コード

App.js

import React from 'react';
import {
  BrowserRouter as Router, Switch, Route
} from 'react-router-dom';
import SignIn from './SignIn';
import Default from './Default';

export default function App(){
  return (
    <Router>
      <Switch>
        <Route exact path='/login' component={SignIn} />
        <Route path='/' component={Default} />
      </Switch>
    </Router>
  );
}

やってみたこと2：react-router-domのLinkを使用してみた

次にLinkを使ったルーティングです。こちらのコードはMaterial-uiのcomponents APIのコードが参考です。

コード

import React from 'react';
import PropTypes from 'prop-types';
import {
  BrowserRouter as Router,
  Link as RouterLink
} from 'react-router-dom';
import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core';
import HomeOutlinedIcon from '@material-ui/icons/HomeOutlined';
import NotificationsIcon from '@material-ui/icons/Notifications';
import GetAppOutlinedIcon from '@material-ui/icons/GetAppOutlined';

function ListItemLink(props) {
  const { icon, primary, to } = props;

  const renderLink = React.useMemo(
    () => React.forwardRef((itemProps, ref) => <RouterLink to={to} ref={ref} {...itemProps} />),
    [to],
  );

  return (
    <li>
      <ListItem button component={renderLink}>
        {icon ? <ListItemIcon>{icon}</ListItemIcon> : null}
        <ListItemText primary={primary} />
      </ListItem>
    </li>
  );
}

ListItemLink.propTypes = {
  icon: PropTypes.element,
  primary: PropTypes.string.isRequired,
  to: PropTypes.string.isRequired,
};


export const mainListItems = (
  <div>
    <Router>
    {/* <Switch> */}

    <ListItemLink to="/" primary="ホーム" icon={<HomeOutlinedIcon />} />
    <ListItemLink to="/test1" primary="Test1" icon={<NotificationsIcon />} />
    <ListItemLink to="/test2" primary="Test2" icon={<GetAppOutlinedIcon />} />

    {/* </Switch> */}
    </Router>
  </div>
);

おわりに

今回はreact-router-domを用いたルーティングについて調べてみました。
react-routerの方もあるっぽいのでこちらも機会を見つけて調べてみます。