[簡単]React x LaravelのSPAで作るチュートリアル②(ルーティング編)

SPAで作るタスク管理アプリのチュートリアル - ルーティング編

今回は第②弾でReact側ルーティングを設定する部分をやっていくで

①環境構築(Docker/Laravel/React.js/Material-UI)
②React側でルーティング設定
③Reactで一覧テーブル作成
④seederで作ったDBのデータをReactに渡して一覧に表示
⑤新規登録機能
⑥編集・削除機能

react-router-domとは

react-router-domってなんやねんって話なんやけど、簡単に言うとURLのPathに対してReact側で表示するコンポーネントを切り替えることができるで。
使い方とか詳しいことに関しては、まぁググってや。

こんなんできるようになるで

ボタンクリックするとページ切り替えできるような機能をこれから作っていくな。

npmでreact-router-domを導入

docker-compose exec web npm install react-router-domを実行

$  docker-compose exec web npm install react-router-dom
docker-compose exec web npm install
---------下記のようなメッセージ出たらOK
added 10 packages, and audited 1379 packages in 7s

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

42 vulnerabilities (35 moderate, 7 high)

こんな感じでpackage-jsonが更新されるはずやわ

package.json

    "dependencies": {
        "@material-ui/core": "^4.11.4",
        "react-router-dom": "^5.2.0"
    }

ルーティング設定のため/resources/js以下のディレクトリ構成を変更する

やることは

• /components下のExample.jsを新規ディレクトリpages下に移動
• /js直下に新規ファイルroute.jsを作成

実行後のディレクトリ構成はこんな感じ

VSCODE使っててExapme.jsの移動のときに、「import先のディレクトリを変えますか」的なメッセージが出たら「はい」を押す

┗ js
  ┗ components       (Example.jsを空になる)
  ┗ pages            (新規ディレクトリ)
    ┗ Example.js     (/componentsから移動)
  ┗ app.js
  ┗ bootstrap.js
  ┗ route.js         (新規作成ファイルで中身はまだ空のままでOK)

/js直下のapp.jsがエディタが良しなにやってくれていることを確認する

(変更されていない場合は自分で変更を加える)

app.js

// 15行目
- require('./components/Example');
+ require('./pages/Example');

pages下のExample.jsが表示できることを確認

Example.js

  <div className="card-header">React導入できたわな？？</div>
　 //13行目辺り
-  <div className="card-body">Im an example component!</div>
+  <div className="card-body">pages下に移動出来た？？</div>
  <Button color="secondary" variant="contained">ワイがMaterial-UIのボタンやな？？</Button>

ビルドする

$ make npm-dev

localhostにアクセスし表示できることを確認

「pages下に移動出来た？？」が表示できていればOK

変更差分は下記のようになるはずや

コミットしておこう

$ git add .
$ git commit -m "react-router-dom導入しディレクトリ変更"

react-router-domを利用してページを表示してみる

laravelでphp artisan ui react --authによってReactを導入した場合、
/js/app.jsが読み込まれる様になっているな。

先程requireの部分を
'./components/Example' →　'./pages/Example'に変えたことによって
pages下のExample.jsが表示されたことからも分かるように、
app.jsの中のrequire()の中で呼ばれたjsファイルが一番最初に呼ばれるんやな。

React側でルーティングしたいので最初に呼ばれるファイルを
/js/route.js/

/js/app.jsを変更する

app.js

// 15行目
- require('./pages/Example');
+ require('./route');

route.jsに下記を貼り付ける

import React from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter,
    Route,
    Switch,
  } from 'react-router-dom';
import Example from './pages/Example';

  function App() {
    return (
        <div>
            <Switch>
             //ここに、pathと対応するコンポーネントを書いていく
            </Switch>
        </div>
    );
}

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

使っているタグがどんな意味か知りたかったらreact-router-domをimportしてるから、ドキュメント読もうな。
公式ドキュメント

の中にルーティングの設定を書いていくで

//route.jsに下記を追記
            <Switch>
                <Route path='/example' exact component={Example} />
            </Switch>

これはpathが/exampleだったらExampleコンポーネントを表示するっているルーティングの設定やね。

変更箇所がわかるようにボタンの文字を変更し不要な記述を削除する

Example.js

                        <div className="card-header">React導入できたわな？？</div>

                        <div className="card-body">pages下に移動出来た？？</div>
//14行目のボタンを「Homeに遷移ボタン」に変更する
-                        <Button color="secondary" variant="contained">ワイがMaterial-UIのボタンやな？？</Button>
+                        <Button color="secondary" variant="contained">Homeに遷移ボタン</Button>
                    </div>
                </div>
            </div>


export default Example;

下記の表示設定はroute.js側で行えるようになったため、削除
//if (document.getElementById('app')) {
//    ReactDOM.render(<Example />, document.getElementById('app'));
//}

ビルドする

$ make npm-dev

先程同様にlocalhostにアクセスしたら、返す対象がないため、jsエラーが出るはず。

localhost/exampleにアクセスすると下記が表示されるはず

ボタンが変わっていればOKな！！！！

コミットしとくで

$ git add .
$ git commit -m "routerを経由してページを表示"

もう一つページ(Home.js)を用意してボタンで遷移できるようにしてみる

/pagesディレクトリにはExacple.jsとHome.jsが存在する状況になるで
ファイル作れたら進んでな。

/pages/Home.jsを用意し下記の様に設定する

Home.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Card } from '@material-ui/core';

function Home() {
    return (
        <div className="container">
            <Card>
                <Button color="primary" variant="contained"　href={`/example`}>Exampleに遷移</Button>
            </Card>
        </div>
    );
}

export default Home;

ボタンが一つあるだけの画面のコンポーネントやな。

表示するにはルーティングの設定がいるな。

Home.jsのルーティングを記載する

route.js

// 8行目 以降
import Example from './pages/Example'; 
// Exampleの下にHome.jsをインポートする
import Home from './pages/Home';

  function App() {
    return (
        <div>
            <Switch>
                <Route path='/example' exact component={Example} />
                // Homeコンポーネントを表示するための設定を記述
                <Route path='/' exact component={Home} />
            </Switch>
        </div>
    );
}

コンポーネントのimportとルーティングの設定を書いただけやな。
exactってなんやねんって気になってる人いてるかもしれへんけど、
これ書いてなかったら前方一致で判定されるはずやから基本は書いといたほうがえと思うわ。

ビルドする

$ make npm-dev

ビルドできたらlocalhostにアクセスして下記のように表示されたらOKや

表示されているボタンにhrefに/exampleを設定したのでクリックすると
expampleページに遷移できるはずやで

Exampleコンポーネントのボタンにもhrefを設定する

Example.js

//14行目にhrefを追加
                 <Button color="secondary" variant="contained" href={`/`}>Homeに遷移ボタン</Button>

これで互いのページを行き来できるようになったはずやで

ビルド

$ make npm-dev

ビルドできたら互いのページ行き来してみて遊んでみたや

つかめてきたら新しいページを用意してroute.jsにルーティングの設定を記述したら
理解深まると思うわ

コミットしとこうな

$ git add .
$ git commit -m "Homeコンポーネントを作成しrouteingの設定"

纏め

このようにlaravel側では環境構築編で設定したように、どのパスが指定されたとしてもapp.blade.phpを表示するように設定しておいてReact.js側でルーティングの設定をすることが出来たな。

ここまで出来たらReactやったことある人ならどんどんページ作っていくことはできそうやな。
ただデータのやり取りが出来てないからそれは次回以降の記事に書いていくことにするで

次はReactで一覧テーブルのコンポーネント作っていくところをやっていこうと思うで。

次回はReactで一覧表示

ほなここまで出来た人はLGTMしといてな。

ソースはGitHubに乗せておくから分からんときはコミット履歴見たら解決できるかもな。
https://github.com/morry48/LaravelReactTaskApp