React Routerについて

React Routerについて初心者がまだ理解できていませんが、メモしています。

V3,V4で大分変わったらしい

• v3のreact-routerとv4のreact-router-domのコンポーネントの比較 v3とv4では破壊的変更があり、簡単には移行ができない
• v4では、v3とは異なり、Routerコンポーネントの小要素には、好きなコンポーネントを配置できるようにな
• v3でと書いていましたが、v4でbrowserHistoryが廃止となります。v4では、単純な実装な場合はRouterからBrowserRouterに書き換えるだけになる

その前に

Routerとは？

参考

v4で大きく３つのRouterコンポーネンネントが提供された

• BrowserRouterはHistoryAPIを使用してUIをURLと同期させるRouterを作成、

  • BrowserRouterは、historyを生成してRouterコンポーネントをレンダリングするコンポーネント

• HashRouterは履歴をwindow.location.hashを使ってUIをURLと同期させるRouterを作成、

• MemoryRouterは履歴をメモリ管理するRouterを作成

n4.js

<BrowserRouter>
  <div>
    <Route path='/about' component={About} />
    <Route path='/contact' component={Contact} />
  </div>
</BrowserRouter>

• 注意点としてRouterは、一つしか小要素を持つことができないので、RouterコンポーネントにRouteを使うときはdivタグなどでRouteコンポーネントを加工必要がある

---

ルーティング設定方法