react-router-dom v6

基本的な設定

1. Routeタグでルーティングの設定をします。
   プロパティとしては、pathとelementです。
   pathに対して、表示するコンポーネントを指定します。
   404ページを作りたい場合は、*をpathに指定します。
2. Routesタグで囲みます。
   Routeタグは必ずRoutesタグで囲む必要があります。
3. BrowserRouterタグで全体を囲みます。
   wrapperの用途です。
   どのページでも表示したい要素は、BrowserRouterタグの外に記述します。

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

function App() {
  return (
    <h1>Hello React Router</h1>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </BrowserRouter>
  );
}

遅延ロード

1. 「Suspense」と「lazy」をimportしておきます。
2. lazy()は、コンポーネントを返す関数です。
   遅延ロード用のコンポーネントをimportします。
   import()で読み込むモジュールは、defaultでエクスポートしておく必要があります。
3. Routeのelementプロパティ内においてSuspenseタグを記述します。
   fallbackプロパティ内には、読み込むまでの間に表示する要素を指定します。

import React, { Suspense, lazy } from 'react';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

const SignIn = lazy(() => import('SignIn'));

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={
          <Suspense fallback={<p/>Loading...</p>}>
            <SignIn />
          </Suspense>
        } />
     </Routes>
    </BrowserRouter>
  );
}

App配下のコンポーネント内でのルーティング設定

Redirectの設定

useParams、useRouteMatch、useHistoryなどのフック

その他の仕様は公式のgithubをご確認下さい。