Routerのルーティングは入れ子にできます。むずかしいことは考えることなく、ルーティングしたコンポーネントの中に、お約束どおりのルーティングを定めればよいのです。ページの遷移と状態の保持」でアプリケーションのモジュール(src/App.js)に書いたコード001に手を加えてゆきましょう。コンポーネントにテキストを加える入れ子のルーティングは、ふたつ目の設定のコンポーネント(Settings2)に加えるつもりです。コンポーネントProductsのタイトルカラーだけでなく、別のテキストも加えられるようにします。そこで、そのテキストをつぎのようにuseState()で状態変数(text2)にもたせました。コンポーネントにこの新たなテキストが加わります(図001)。入れ子のルーティングを定める入れ子のルーティングは、ルーティング先のコンポーネントの中にさらにルーティングを定めるというだけです。それ以外、とくに変わったところはありません。ルーティングは<Route>と<Switch>で決めればよく、遷移には<Link>を使ってください。ふたつ目の設定画面のコンポーネント(Settings2)はつぎのように書き替え、ふたつのルーティング先のデータは配列(settings)で定めました。prev</Link></p></>);};これでProductsコンポーネントのタイトルの色だけでなく、新たに加えたテキストも動的に書き替えられます(図002)。手直ししたアプリケーションモジュールsrc/App.jsの記述全体は、以下のコード001のとおりです。サンプル001をCodeSandboxに公開しました。