React 画面遷移をスライドアニメーションで表現する方法

はじめに

今回はReactで画面遷移時のスライドアニメーションの実装方法をまとめてみました。
Reactのライブラリを使用します。

参考サイト

【The easiest way to slide React routes】
　- 画面遷移をスライドで表現する

ちなみにこちらのサイト、Reactを勉強してる方にオススメです。
機能ごとに検索できて、すごく分かりやすいです。
【React.js examples】
　- React勉強者オススメ

実装準備

まず最初はreact-slide-routesとreact-router-domをインポートします。

npm info react-slide-routes
npm info react-router-dom

現在の最新バージョンを確認して、そのバージョンをyarn addします。

yarn add react-slide-routes@0.14.0
yarn add react-router-dom@5.2.0

これでreact-slide-routesとreact-router-domを使用することができます。

実装方法

まずはスライドを適応させたいコンポーネントをBrowserRouterで挟んであげます。
インポートもお忘れなく。こちらはindex.js

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

そして今回使用するのは、SlideRoutes, Route, NavLink, useLocationなので、これらをまずインポートします。こちらはApp.js

App.js

import React from 'react';
import SlideRoutes from 'react-slide-routes';
import { Route, NavLink, useLocation } from 'react-router-dom';

今回は必要最低限のcssでご紹介します。
参考サイトのコードにはもっと整ったcssが載っていますのでご参考ください。
コンポーネントも別ファイルに作らずApp.jsに作っています。
Home,About,Contactの三つの画面をスライド遷移させます。

App.js

const Home = () => <div style={styles.home}>Home</div>;
const About = () => <div style={styles.about}>About</div>;
const Contact = () => <div style={styles.contact}>Contact</div>;

const styles = {
  home: {
    color: '#fff',
    fontSize: '64px',
    background: 'rgba(255, 100, 0)',
  },
  about: {
    color: '#fff',
    fontSize: '64px',
    background: 'rgba(0, 150, 255)',
  },
  contact: {
    color: '#fff',
    fontSize: '64px',
    background: 'rgba(44, 219, 88)',
  },
}

そしてこちらがスライド機能の部分です。
useLocationでページのURLのpath情報を読み取り、
durationはスライドの秒数を指定することが出来ます。

App.js

const App = () => {
  const location = useLocation();

  return (
    <>
      <nav>
        <NavLink to="/" exact>Home</NavLink>
        <NavLink to="/about">About</NavLink>
        <NavLink to="/contact">Contact</NavLink>
      </nav>

      <SlideRoutes location={location} duration={500}>
        <Route path="/" component={Home} exact />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </SlideRoutes>
    </>
  );
};

export default App;

終わりに

今回はReactの画面遷移をスライドで表現する方法をご紹介いたしました。
画面遷移時にアニメーションがあるのと無いのでは使い心地が違いますよね。
最後まで読んでいただきありがとうございます。また新たな発見を発信したいと思います。