javascript react プログラミング 開発ノウハウ

react-router-domを使ってルーティングを実装する

投稿日:

こんにちは、mabuiです。
前回はReduxを導入して、状態管理をしやすくしました。
ですがまだこの状態のサンプルだとサービスとして味気ないので、
今回はreact-router-domを使ってSPAでページ遷移をし、
各コイン銘柄ごとのチャート表示画面を実装していきます。

 
 

動作イメージ


各コイン銘柄名にリンクを貼り、そこからチャートの描画画面を表示する
実装になっています。

 
 

react-router-domのインストール

ルーティング用のライブラリが色々あって、どれを使用していいか迷いましたが、
Reduxの公式リファレンスを見てreact-router-domを使用することにしました。
インストールコマンドは下記です。

 
 

ReactDOMのレンダリングメソッドにrouterを取り入れる

BrowserRouterとRouteのタブを使用して、
画面に表示するコンポーネントとパスの紐付けをします。
Routeタブの属性でexactを使用すると、パスの指定が正確な時のみ
コンポーネントが表示されます。
“/“のパスで指定しないと、常にそのコンポーネントが表示されてしまいます。
また、:idのように、パスに変数を埋め込むことが可能です。

 
 

リンクの作成方法

リンクをつけたい箇所にLinkタブを使用して作成します。
To属性でリンク先を指定するのみで簡単に使えます。

 

インポート

 

コイン名からチャート画面へのリンク

 

チャート画面からコイン一覧へ戻る

 

ルーティングの説明は以上です。
チャートを描画するコンポーネントの作り方はこちらの記事で説明します。
Plotly.jsを使ってReactコンポーネント内にチャートを表示する

今回作成したコードのGitHubはこちらです。

-javascript, react, プログラミング, 開発ノウハウ
-, , ,

Copyright© 仮想通貨始めました , 2018 All Rights Reserved Powered by STINGER.