• 本文
• リロード
• 差分
• バックアップ
• 名前変更
• リファラ
• 新規ページ
• 編集

React Router

React Router/ルータ

Top / React Router / ルータ

React Router v7

• https://reactrouter.com/start/library/routing

React Router v6

• https://reactrouter.com/6.28.0/routers/picking-a-router

RouterProvider & createBrowserRouter

• React Router v6.4.0で追加
• This is the recommended router for all React Router web projects.
• ルート構成をオブジェクトやJavaScriptコードで宣言的に定義
• createRoutesFromElements?だとJSXで書ける
• We recommend all web projects use createBrowserRouter.
• ローダーやアクションなどのデータ取得やミューテーションロジックを組み込める

React Router/BrowserRouter

• v6以前から存在
• JSXで子要素としてルートを定義
  • React Router/Routes
  • React Router/Route
• JSXの中にルートを直接記述でき、簡単で直感的。

メモ

• In v6.4, new routers were introduced that support the new data APIs:
  • https://reactrouter.com/6.28.0/routers/picking-a-router
• createBrowserRouter
• createMemoryRouter?
• createHashRouter
• createStaticRouter?

React Router/データAPI?非サポート

• BrowserRouter
• MemoryRouter?
• HashRouter?
• NativeRouter?
• StaticRouter?
• →createBrowserRouter(createRoutesFromElements?(～))を噛ませばOK