Part２ 『入門』Reactポートフォリオ作成（Reactルーター、コンポーネント）

この記事は、Part1 『入門』Reactポートフォリオ作成の続きになります。

前回のあらすじ

前回はRectの環境構築からプロジェクト作成、sanityプロジェクトを作り、ターミナルで使用できる様にしたりとインフラ的なものを構築しました。
Part2からは実際に静的なウェブページを作っていきます。

コンポーネントの追加

フロントエンドのフレームワークでよく行う方法コンポーネント化ですが、簡単に説明すると、これはウェブページを各パートに分けることにより保守性の向上やコンポーネントの使い回しなどに使用されます。

例としては、Button.jsというコンポーネントで以下の様なボタンを作ったとします。

このボタンを一個作ることで、様々なページで使い回すことが可能になります。

では、早速srcフォルダ配下にcomponentsフォルダを作成しその中に、Navbar.js, Home.js, About.js, Post.js, DetailPost.js作成します。

各ファイルは以下のように編集します。

/src/components/Navbar.js

import React from 'react'

function Navbar() {
 return (
   <div>
     This is Navbar
   </div>
 )
}

export default Navbar 

/src/components/Home.js 

import React from 'react'

function Home() {
 return (
   <div>
     Home page
   </div>
 )
}

export default Home

/src/components/About.js

import React from 'react'

function About() {
 return (
   <div>
     About page
   </div>
 )
}

export default About

/src/components/Post.js

import React from 'react'

function Post() {
 return (
   <div>
     Post page
   </div>
 )
}

export default Post

/src/components/DetailPost.js

import React from 'react'

function DetailPost() {
 return (
   <div>
     DetailPost page
   </div>
 )
}

export default DetailPost

これで各ファイルの準備ができました。

Reactルーターのインストール

作成するポートフォリオはSPA(Single Page Application)に対応します。
そのためターミナルで npm install react-router-domを実行します。

 npm install react-router-dom

インストール完了したら、App.jsで読み込みます。

先ほど作成した各コンポーネントも全てApp.jsで読み込みできるように以下のように編集します。

/src/App.js

// 追加
import { BrowserRouter, Route, Switch } from "react-router-dom"; 
// 各コンポーネントが読み込めるよう追加
import Home from "./components/Home";
import About from "./components/About";
import DetailPost from "./components/DetailPost";
import Post from "./components/Post";
import Navbar from "./components/Navbar";


// App.cssは使用しないので削除
import './App.css';

function App() {
 return (
   // ここから削除
   <div className="App">
     <header className="App-header">
       <p>
         Edit <code>src/App.js</code> and save to reload.
       </p>
       <a
         className="App-link"
         href="https://reactjs.org"
         target="_blank"
         rel="noopener noreferrer"
       >
         Learn React
       </a>
     </header>
   </div>
   // ここまで削除
   
   // ここから追加
   <BrowserRouter>
   <Navbar />
   <Switch>
     <Route component={Home} path='/' exact />
     <Route component={About} path='/about' />
     <Route component={DetailPost} path='/post/:slug' />
     <Route component={Post} path='/post' />
   </Switch>
   </BrowserRouter>
   // ここまで追加
   
 );
}

export default App;

import { BrowserRouter, Route, Switch } from "react-router-dom";でBrowserRouterとRouteとSwitchを使用できるようにします。

react-routerでSPAに対応したい場合は、コンポーネントは全て<Brで使用する必要があります。<BrowserRouter>内に入れてあげることでSwitchやRouteなどを使用できるようになります。
※<BrowserRouter>は一つのアプリにつき一回しか使用できません。

<Switch>〜</Switch>で囲ってあげることで、最初に一致したコンポーネント（URL）を描画させることができ、もし指定したどれにも一致しない場合に返すコンポーネント（URL）も指定できます。

<Route />は使用頻度が高く、pathとcomponentを指定してすることで指定したURLのときは、指定したコンポーネントを呼び出すことができるようになります。

実際にサーバーを立ち上げてhttp://localhost:3000/にアクセスしてみましょう。

<Route component={Home} path='/' exact /> ←こちらの記述によりhttp://localhost:3000/の時にはpathが'/'なのに加えてcomponentにHomeを返すように記述しているのでトップページでは以下のように表示されます。

この勢いでAboutとPostも表示してみましょう。

http://localhost:3000/about
http://localhost:3000/post
http://localhost:3000/post/aaa

About pageとPost pageとDetailPost pageが表示されればルーティングが正常に動いています。DetailPostのpost/aaaは別パートで説明します。

ここで常に表示されているThis is Navbarですが、これはNavbar.jsは常にウェブサイト上部で表示させたいので<Switch>の外側に配置しています。
こうすることでどこのページに移ってもNavbar（ヘッダー ）が表示されます。

<BrowserRouter>
   <Navbar />　{/* ←これ */} 
   <Switch>
     <Route component={Home} path='/' exact />
     <Route component={About} path='/about' />
     <Route component={DetailPost} path='/post/:slug' />
     <Route component={Post} path='/post' />
   </Switch>
</BrowserRouter>

次回

次回はNavbarの各リンクの設定とCSSで見た目を整えていきます。