react-routerは意外と簡単です!

  • このエントリーをはてなブックマークに追加
react-router

「ルーティングしたい!でも、Reactだけでも難しいのにreact-routerなんて。。。」と思っている方に朗報です。
意外とreact-routerは難しくありません!むしろ、シンプルで分かりやすいぐらいです!今回は、基本的な使い方と少しの応用編をご紹介していきます。それでは、どうぞ!!

react-routerを使用するメリット

SPA(シングルページアプリケーション)では、1つのHTMLファイルの状態を変更することで、ユーザビリティを向上させます!
状態を変更するだけなら、以下のようにReactのコンポーネントを差し替えるだけでも可能です。

render(){
  const current = this.props.current;
  let Content = null;
  switch(current){
    case 'login':
      Content = () => (<Login />)
      break;
    case 'myPage':
      Content = () => (<MyPage />)
      break;  
}
  return(
    <div>
      // currentの状態によって、LoginページとMyPageページに切り替える。
      <Content />
    </div>
  );
};

しかし、これではURLが変わらないため、以下の問題が発生します。
– ブラウザの進むボタン、戻るボタンが使用できない。
– 特定のコンテンツのブックマークができない。

前置きが長くなりましたが、今回紹介するreact-routerがこの問題を解決してくれます。
それでは、機能の詳細を見ていきましょう。

基本的な使い方

以下のように実装すれば基本的な機能を使用することができます。

import { BrowserRouter, Route} from 'react-router-dom';

const App = () => (
  <BrowserRouter>
    <div>
    <Route exact path="/" component={Login}>
      <Route path="/mypage" component={MyPage} />
    </Route>
    </div>
  </BrowserRoute>
);

それでは1つ1つ解説していきます。
React Router: Declarative Routing for React.js

BrowserRouter
ルータ。HTML5のhistory APIを使用して、URLを更新する。この配下に子コンポーネントを入れていく。
(※を拡張したもの。)

Route
機能としては、pathと合うcomponentをレンダリングするだけ。
– path:URLを指定する。
– component:表示させたいコンポーネントを指定する。
– exact:location.pathnameとpathが正確に一致する場合のみ。

location.pathnameは、現在ページのURLパス名。

リンクを行いたい場合

通常、リンクを行いたい場合は、アンカーリングタグを使用すると思います。react-routerでは、コンポーネントを使用して実現します。

import { Link } from 'react-router';
<Link to="/dfjsaijif">マイページへ</Link>

応用的な使い方

パラメータを受け取る方法

ユーザ毎のマイページなどでURLに動的なパラメータを指定したい時がありますよね。そんなときは、以下のように使用できます。

①Routeに以下を設定します。

<Route path="/mypage/:id" component={MyPage} />

②MyPageコンポーネントでパラメータを受け取る。

const params = this.props.match.params.id

③新しいIDにアクセスする。

<Link to="/mypage/dafijafd">マイページへ</Link>

まとめ

react-routerの機能について簡単にご紹介しました。Reactを使用する上で必須レベルです。他にもたくさんの機能があるので、これを機に使ったみてください!

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*