ルーティングライブラリについて

Reactでルーティングライブラリって何使えばいいのか？

• 今のプロジェクトでPage.jsを使っている。
• みんなReact Router使ってるので比べた。
• ブラウザのみ、SSRなし。

---

Page.jsについて

• https://github.com/visionmedia/page.js/
• シンプルなルーティングライブラリ。

import page from 'page';

page("/users/", () => {
  console.log("Userページです");
  store.dispatch(/* storeをupdateするAction */);
});

page();

---

React Routerについて

• https://github.com/ReactTraining/react-router
• React専用に作られたルーティングライブラリ。
• ルーターをコンポーネントとして扱ってる。

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

export function StartRouters() {
  return (
    <Router>
      <div>
        <Navigation />
        <Route exact path="/" component={Home} />
        <Route exact path="/users" component={Users} />
      </div>
    </Router>
  );
}

---

実装したコード

• https://github.com/hrnkoji/router-example
• Rakuten React kitを使ってます。

---

まとめ

• 今のところPage.jsでいいと思った。

  • Page.jsじゃなくて他のルーティングライブラリでもよい。
  • 他のライブラリも調べる。

• React RouterもRouterをコンポーネントにするのは見やすかった。

  • ただコンポーネントに渡す前のデータをいじりたいとか思うと大変そう。
  • React Routerの使い方をもっと調べる。

• window.historyまたはReactTraining/history使って自分で作るのも面白そう。

  • ReduxとReact Routerの相性が悪いのでrouterを一から書いてみた