React-Router-Domを導入したい

URLによって表示内容をフロント側で変更する「ReactRouterDom」について書いていきます。

今回使う環境はReact+RailsAPI環境です。
環境構築に関しては以下を参照してください。

インストール

Reactをインストールしたディレクトリで以下のコマンドを実行して、React-Router-Domをインストールしてください。

ターミナル

npm install react-router-dom


中略
+ react-router-dom@5.2.0
added 340 packages from 91 contributors, removed 230 packages, updated 1458 packages and audited 1808 packages in 1537.164s

132 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

React－Router-Domを実装

以下のようにファイルにコードを書いていきます。

App.js

//react-router-domで使うものをimportする
import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";

//切り替え先のcomponentをimportする
import {SampleA} from './components/sampleA.jsx'
import {SampleB} from './components/sampleB.jsx'
import {SampleC} from './components/sampleC.jsx'

function App() {
  return (
{/*全体を<Router><Switch>で囲む*/}
　<Router>
   <Switch>
    {/* <Route>で個々のルーティングを定義する */}
    <Route 
          exact
          path="/sampleA">
    <SampleA />
    </Route>
    <Route 
          exact
          path="/sampleB">
    <SampleB />
    </Route>
    <Route 
          exact
          path="/sampleC">
    <SampleC />
    </Route>
　 </Switch>
 </Router>
)
}
export default App;

Routeについて書きますと、今回のコードでは以下を使用しております。

Routeについて

<Route 
 exact
 path="/SampleA">
 <SampleA />
</Route>

exactを使用すると pathで指定したURLが完全一致したときのみ動作するようになります。
exactをつけないと、pathで指定したURLと部分一致で動作するようになります。

基本的にはexactをつけておいて、意図しないURLが発火した時に表示されないように制御するといいかなと思います。

pathに関しては、どういったURLに対して、動作するかを定義しています。
そして、URLが一致した場合、< Route>< /Route>の間に挟んだ処理を実行します。

切り替える先のjsxを定義する

ここでは、< Route>< /Route>の中身、指定のURLを入力されると表示される画面の本体を書いていきます。このようにAPP.jsに直接書かず、別ファイルに切り出すことで部品のようにコードを管理できます。

Routeで表示する中身を簡単に書いていきます。

src/components/SampleA.jsx

import React, {Fragment} from 'react'

export const SampleA = () => { 
  return (
    <Fragment>
　　　sampleAページ
    </Fragment>
  )
}

src/components/SampleB.jsx

import React, {Fragment} from 'react'

export const SampleB = () => { 
  return (
    <Fragment>
     sampleBページ
    </Fragment>
  )
}

src/components/SampleC.jsx

import React, {Fragment} from 'react'

export const SampleC = () => { 
  return (
    <Fragment>
　　　sampleCページ
    </Fragment>
  )
}

実装確認

実装したコードを動かしてみます。 npmstartコマンドを実行した後に、、http://localhost:3000/SampleAなど、pathに設定したURLにアクセスしてみましょう。

コードを動かす

npm start

ちなみに、http://localhost:3000 だと、path='/'と定義していないため、何もレンダリングされません。
適宜、表示させたいpathと中身をRouterで定義していきましょう!

参考

RailsとReactでUberEats風SPAアプリケーションをつくってみよう！ https://www.techpit.jp/courses/138/curriculums/141/sections/1048/parts/4151