【React】OtherページをAboutページに変更、ルーティング変更（Reactスターターキット）

Reactの続きです。前回はstyled-componentsにフックの値を設定し、動的にスタイルを変更しました。ジャンプ率ジェネレーターが完成しました！この時、otherページをaboutページに作り替えたのですが、aboutページについては今後も使いそうなので、Reactスターターキットの方にも反映したく。それではいきましょう！

【目次】

前回のおさらい
data.jsonのotherキーをaboutキーに
Aboutコンポーネントを作成
HeaderコンポーネントのリンクパスをAboutに
Mainコンポーネントの修正
Innerコンポーネントを修正
リダイレクト設定を変更
ブラウザ挙動
最後に

※参考：前回記事
【React】styled-componentsにフックの値を設定し、動的にスタイルを変更（ジャンプ率ジェネレーター完成！） - クモのようにコツコツと

※参考：【React】ReactでWebアプリを作るシリーズまとめ
qiita.com

前回のおさらい

styled-componentsにフックの値を設定し、動的にスタイルを変更。ジャンプ率ジェネレーターが完成！

※参考：【React】styled-componentsにフックの値を設定し、動的にスタイルを変更（ジャンプ率ジェネレーター完成！） - クモのようにコツコツと

作ったアプリはこちら

※参考：React App

また、このアプリでは「other」ページを「about」ページに改造した。 f:id:idr_zz:20210412065045j:plain

※参考：【React】Aboutページ作成、input（type="range"）タグ配置（ジャンプ率ジェネレーター） - クモのようにコツコツと

aboutページはこちら

※参考：https://ryo-i.github.io/jump-rate-generator/about

「about」は今後も他のアプリでも必要なページなのでReactスターターキットにも反映したい。

※参考：【React】React + TypeScript + CSS in JSスターターキットを作る（アプリ作る人に俺はなる！） - クモのようにコツコツと

data.jsonのotherキーをaboutキーに

「data.json」の「other」キーを「about」キーに変更。

        "about": {
             "title":"このアプリについて",
             "text": "アプリの概要をここに書く。"
         },

この内容がtitle、description、h1タグになる。

Aboutコンポーネントを作成

Aboutコンポーネント（About.tsx）を作成し、Aboutページに入れる内容を入れる。

import React  from 'react';

 // Component
 function About() {
     return (
         <div className="inner">
             <section>
                 <h2>タイトル</h2>
                 <p>説明説明説明説明説明説明説明説明</p>
             </section>
             <section>
                 <h2>イイダリョウ</h2>
                 <p>フロントエンドエンジニア。神奈川に住まう四十路のオジキ。 DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。ブログも書いてます。 Webづくり やりたい時が 始め時！</p>
                 <ul>
                     <li><a href="https://www.i-ryo.com">ブログ</a></li>
                     <li><a href="https://twitter.com/idr_zz">Twitter</a></li>
                     <li><a href="https://qiita.com/i-ryo">Qiita</a></li>
                     <li><a href="https://github.com/ryo-i">GitHub</a></li>
                 </ul>
             </section>
         </div>
     );
 }

 export default About;

最初のsectionは毎回違う内容になるが、2つめのsectionは作者のプロフィールで毎回共通な内容。

Headerコンポーネント（Header.tsx）を修正

           <nav>
             <span>MENU:</span>
             <span><Link to={ homeUrl + "/" }>Home</Link></span>
             <span><Link to={ homeUrl + "/about" }>About</Link></span>
           </nav>

リンクパスを/other→ /aboutに変更

Mainコンポーネントの修正

Mainコンポーネント（Main.tsx）を修正。ここが一番ボリューミーだった。

まず先ほど作ったAboutコンポーネントをインポートする

import About from './About';

「data.json」からはotherキーではなくaboutキーを取得する

 const aboutTitle = Data.data.about.title;
 const aboutText = Data.data.about.text;

変数名もotherTitle→aboutTitle、otherText→aboutTextに変更

JSX部分の修正

          <Route path={ homeUrl + "/about" }>
             <Helmet>
               <title>{ aboutTitle }</title>
               <meta name="description" content={ aboutText } />
             </Helmet>
             <h1>{ aboutTitle }</h1>
             <p dangerouslySetInnerHTML={{ __html: aboutText }}></p>
             <About />
           </Route>

Routeコンポーネントのパス名を/other→/aboutに
titleタグをotherTitle→aboutTitleに
metaタグのdescrption属性をotherText→aboutTextに
h1タグもの中身をaboutTitle、pタグの中身をaboutTextに
Aboutコンポーネントを追加

ここは重要なところで、下記の3つのことをやっている

react-routerのルーティング設定を変更
helmetのheadタグ設定を変更
Aboutコンポーネントを読み込み

CSS in JS（styled-components）の設定を変更

variableでCSS変数を取得して

const variable = cssVariables.variable;

InnerコンポーネントとAboutコンポーネントの共通スタイルはここに設定する

const SectionTag = styled.section`
   ${pageSize}
   section {
     margin: 0 0 20px;
   }
   h1 {
     margin: 0 0 10px;
     font-size: 1.5em;
   }
   h2 {
     margin: 0 0 5px;
     font-size: 1.25em;
     color: ${variable.baseColor};
   }
   p {
     margin: 0 0 10px;
   }
   ul {
     margin: 0 0 10px;
   }
 `;

Innerコンポーネントを修正

Innerコンポーネント（Inner.tsx）からスタイル設定を削除

インポートしていたstyled-componentsとCSS変数データを削除

 // import styled from 'styled-components';
 // import cssVariables from './style/variables.json';

CSS変数の設定も削除

// const variable = cssVariables.variable;

SectionTagコンポーネントのスタイル設定も削除

/* const SectionTag = styled.section`
   & h2 {
     font-size: 1.25em;
     color: ${variable.baseColor};
   }
 `; */

SectionTagコンポーネントをただのsectionタグに変更

 <div className="inner">
       {innerJson.map((innerJson, index) =>
         <section key={ index }>
           <h2>{ innerJson.title }</h2>
           <p dangerouslySetInnerHTML={{ __html: innerJson.text }}></p>
         </section>
       )}
     </div>

リダイレクト設定を変更

SPAはTopページ以外のページを開いたりそこでリロードすると404になってしまうのを防ぐためにリダイレクト設定をしている。

※参考：【React】React RouterでSPAのルーティング設定（下層ページの404対策も） - クモのようにコツコツと

その設定を書いている「index.html」のheadタグのscriptを変更する。

<script>
       const aboutPagePath = '/react-app-started/about';
       const path = sessionStorage.getItem('path');
       console.log(path);

       if (path && path === aboutPagePath) {
         sessionStorage.removeItem('path');
         window.history.replaceState(null, null, './about');
       }
     </script>