#35 react-routerを使用して画面遷移によりお店の詳細情報を表示

[Yuki-TU]

概要

closed #35

変更内容

• react routerを導入
• ジャンルを選択しお店一覧を表示して、各お店の名前のところをリンクとし、リンクを押下すると各お店の詳細情報を表示する。
• 各お店の詳細情報のURLは/detail/1などのように/detail/[お店のインデックス]とした。
• フッター部分を下部に固定。

pc版

mobile版

影響範囲

• テーマの指定をAppコンポーネント全体にかかるように変更。
• MainContent.tsxをSearchRestaurant.tsxに変更。それに伴い各ソースコードのimport欄のコード変更。
• MainContentディレクトリの中に新たにSearchRestaurantディレクトリを作成し、ジャンルに応じてレストランを検索するコンポーネント(SearchRestaurantコンポーネント）をこのディレクトリに移動。それに伴い、各ソースコードのパスを変更。

動作要件

特になし。

補足

• レストランを検索するコンポーネント（SearchRestaurantコンポーネント）と各レストラン詳細表示をするコンポーネント（RestaurantDetailInfomationコンポーネント）だけを切り替えるだけで画面遷移を実施しているため、サイトトップの画像は切り替わらない。（SPA化）

• 参考

• フッター部分を下部に固定 https://techacademy.jp/magazine/19410
• react-routerの使用 https://qiita.com/TsutomuNakamura/items/34a7339a05bb5fd697f2

[Higakinn]

前から気になっていたのですが、headerの両端に空白があるようにみえます。 こちらは前までなかったとおもうのですが、、修正することは可能でしょうか。 production環境では空白はなく、staging環境では空白がはいっている状況です。

[Yuki-TU]

前から気になっていたのですが、headerの両端に空白があるようにみえます。 こちらは前までなかったとおもうのですが、、修正することは可能でしょうか。 production環境では空白はなく、staging環境では空白がはいっている状況です。

ここね↓

他のサイトを見ていると、余白があるのが一般的ぽい。 余白ある分、見やすくてスタイリッシュでいいからこの仕様に変更した

• ホットペッパーグルメ
• 食べログ
• ぐるなび

でも、デプスが生じているのは、直したいですねー。

[Higakinn]

前から気になっていたのですが、headerの両端に空白があるようにみえます。 こちらは前までなかったとおもうのですが、、修正することは可能でしょうか。 production環境では空白はなく、staging環境では空白がはいっている状況です。

ここね↓

他のサイトを見ていると、余白があるのが一般的ぽい。 余白ある分、見やすくてスタイリッシュでいいからこの仕様に変更した

• ホットペッパーグルメ
• 食べログ
• ぐるなび

でも、デプスが生じているのは、直したいですねー。

なるほど、承知です。 デプスについてはまた違うissueで対応すれば良いと思います。

[Higakinn]

LGTM