5.1.2シングルページアプリケーション(SPA)には、状態をもたせることができ、それに応じてコンポーネントの表示が変えられます。今回確かめるのは、ルーティングで状態がどのように扱われるのかということです。前回アプリケーションのモジュール(src/App.js)に書いたコード002に手を加えてゆきましょう。テキストのカラーを設定するホームのコンポーネント(Home)のテキストカラーを、ステートフックuseState()でもたせた状態変数(color)でつぎのように定めます。ホームのテキストが指定した色に変わりました(図001)。クラスのコンポーネントをuseState()で関数に書き替える」02「ステートフックuseState()を使う」をお読みください。カラーを動的に変えるカラーの状態変数値(color)は、設定のコンポーネント(Settings)から変えられるようにします。type="text">要素)の入力(onChangeイベント)により呼び出しているのが状態の設定関数(setColor())です。文字列で打ち込んだカラー名あるいはカラー値にもとづいて、ホームのテキストの色が動的に変わります(図002)。設定画面のコンポーネント(Settings2)をもうひとつ増やします。上部(<ul>要素)のリンク項目には加えません。ひとつ目の設定コンポーネント(Settings)から、つぎのように<a>要素で遷移することにします。結論として、ここで<a>要素を用いるのは適切ではありません。この場合何が起こって、何が起こらないのかを、確かめてみようということです。(<h2>Settings2</h2>);試してみてわかるのは、ひとたびふたつ目の設定画面に移ると、テキストカラー(black)がもとに戻ってしまうことです。何が起きているのか確かめるため、public/index.htmlに、つぎのようなJavaScriptコードを加えてみましょう。loaded!)が出力されます。画面上部(<ul>要素)のリンクでルーティングしているかぎり、改めてテキストが示されることはありません。ところが、設定のコンポーネント(Settings)から<a>要素で遷移すると、テキストが出力されます。ページがリロードされて、カラーの状態変数(color)も初期値に戻ってしまったということです。ルーティングはLinkコンポーネントで行うルーティングは<a>要素でなく、Linkコンポーネントで行わなければなりません。設定のコンポーネント(Settings)の記述を改めるとともに、ふたつ目の設定のコンポーネント(Settings2)はまた別のコンポーネント(Products)のテキストカラーが変えられるように書き加えましょう。prev</Link></p></>);どちらの設定画面で定めたテキストカラーも、ルーティングによって失われることはなくなりました(図003)。ページがリロードされなくなったからです。モジュールsrc/App.cssの記述は以下のコード001にまとめ、サンプル001はCodeSandboxに公開しました。