Reactを使ってブログサイトを作る 06 - 二次ルートの設定

二次ルートの設定

• pages ディレクトリ内に、次のページ用のフォルダをそれぞれ作成します：Home（データ概要）/Article（コンテンツ管理）/Publish（記事公開）。各フォルダ内に index.jsx を作成し、基本的なコンポーネントを作成後、エクスポートします。

• router/index.js にて、ネストされたサブルートを設定し、Layout 内にサブルートの出口を設定します。

• Link を使用して、左側メニューの内容を変更し、サブルート規則と一致させてルーティングの切り替えを実現します。

• 効果

URLに基づいてメニューをハイライト

実装効果

• ページをリフレッシュした際、現在のルートパスに基づいて左側メニューが対応する項目をハイライト表示する。
  

思考の分析

• 1. 現在のulのルートパスを取得する。
• 1. メニューコンポーネントでハイライトを担当する属性を見つけ、現在のルートパスをバインドする。