React 画面遷移方法 - Elsaの技術日記(徒然なるままに)

前回の記事にてReactでの画面遷移方法は後回しにしました。
elsammit-beginnerblg.hatenablog.com

今回は後回しにした画面遷移についてまとめたいと思います！！

■画面遷移環境構築
■画面遷移方法
■最後に

■画面遷移環境構築

Reactでの画面遷移を行うにあたり、
「react-router-dom」
というライブラリを用います。

react-router-domに似たreact-routerがありますが、こちらとの差異はこちらにまとまっております。
https://qiita.com/koja1234/items/486f7396ed9c2568b235

react-router-domライブラリについてはこちらに掲載されています。
GitHub - ReactTraining/react-router: Declarative routing for React https://github.com/ReactTraining/react-router/tree/master/packages/react-router-dom

インストール方法はこちらになります。

npm install react-router-dom

yarn add install react-router-dom

■画面遷移方法

今回は前回作成したGoogleトレンドでの検索画面の検索結果画面を例にして進めていきたいと思います！！
画面遷移の流れですが、
　検索画面⇒検索結果画面
の順で遷移させていきたいと思います。

まずは、検索画面、検索結果画面をそれぞれ作成していきます。<検索画面>

  InputForm = () => {
    return(
      <div>
        <h1> Googleトレンド検索画面</h1>
        <input type="text" id="SearchName" maxLength="50"/><br/>
        <button>
            <Link to='/about' onClick={this.doSomething}>確定</Link>
        </button>
      </div>
    );
  }

<検索結果画面>

  ResultForm = () =>{
    const {Search} = this.state;
    return (
      <div>
        <h1> Google検索結果</h1>
        <div id="widget">
          <GoogleTrends
            type="TIMESERIES"
            keyword={Search}
            url="https://ssl.gstatic.com/trends_nrtr/2051_RC11/embed_loader.js"
          /> 
          <button>
            <Link to='/'>戻る</Link>
          </button>
        </div>
      </div>
    );
  }

ここで、

<Link to='/about' onClick={this.doSomething}>確定</Link>

<Link to='/'>戻る</Link>

がそれぞれページの遷移先を示しております。

to='/' や to='/about'が遷移先のパスに該当します。
今回のソースでは、bottunタグで囲んでいるため、ボタン押下時にLinkが読み出されて遷移先パスへの画面遷移が実行されます。

次にページ遷移させるためのパス定義ですがこちらになります。

      <BrowserRouter>
        <div>
          <Route path='/about' component={this.ResultForm} /> 
          <Route exact path='/' component={this.InputForm} />
        </div>
      </BrowserRouter>

BrowserRouterタグ内にRouteタグでpath='~~'といった形でパスを定義します。
定義したパスにアクセスした場合の実行処理をcomponentに記載します。
今回は、
　・検索画面：パス：/ 実行処理：this.ResultForm
　・検索結果画面：パス：/about 実行処理：this.InputForm
となります。

こちらの定義を、

  render(){
    return (<div>
      <BrowserRouter>
        <div>
          <Route path='/about' component={this.ResultForm} /> 
          <Route exact path='/' component={this.InputForm} />
        </div>
      </BrowserRouter>
    </div>);
    }

といったように、render()の中に定義します。

これで'/'にアクセスすると検索画面が表示され、
確定ボタンを押下すると'/about'パスに画面が遷移し、検索結果画面が表示されます。

今回は関数でしたが、クラス毎に画面を用意してた上で遷移させることも可能です。
この場合にはこちらのようになります。<検索画面>

// pageone.js

import React from "react";
import {Link } from 'react-router-dom'
export default class pageone extends React.Component  {
    render(){
        return (<div>
            <h1> 検索画面</h1>
            <button>
                <Link to='/about'>確定</Link>
            </button>
          </div>);
        }
}

<検索結果>

// pagetwo.js

import React from "react";
import { Link } from 'react-router-dom'
export default class pagetwo extends React.Component  {
    render(){
        return (<div>
            <h1> 検索結果画面</h1>
            <button>
                <Link to='/'>確定</Link>
            </button>
          </div>);
        }
}

<ページ遷移定義>

//App.js

import { BrowserRouter, Route } from 'react-router-dom'
import Pageone from './pageone';
import Pagetwo from './pagetwo';
function App() {
  return (
    <div className="App">
        <BrowserRouter>
        <div>
          <Route path='/about' component={Pagetwo} /> 
          <Route exact path='/' component={Pageone} />
        </div>
      </BrowserRouter>
    </div>
  );
}