switchはなくなり
Routesになった

BrowserRouterで囲まないと利用できない

    <BrowserRouter>
      <App />
    </BrowserRouter>

CODE-EGG

基本形

Routeのelement propにjsxエレメントを渡し、path一致したらレンダリングされる。
基本的にはこれだけ

    <BrowserRouter>
        <Routes>
          <Route path="/" element={<Login />} />
          <Route path="/signin" element={<Signin />} />
        </Routes>
    </BrowserRouter>

CODE-EGG

動的パス

 <Route path="/:xxxId" element={<Login />} />

CODE-EGG

exact propsはなくなり、常に完全一致によるルーティングがされるようになった

任意のパスにはアスタリスクを利用する

 <Route path="/home/*" element={<Login />} />

CODE-EGG

<Routes>のchildrenの<Route>の順番は気にする必要はない。v5では気にする必要があったがv6では先にpathに一致したからレンダリングとはならない。

CODE-EGG

Routerをネストすることができる。
このようにすることで、
/homeコンポーネントの中に/home/signinの内容を描画することができる。(相対パスで記述できる)

    <BrowserRouter>
        <Routes>
          <Route path="/home/*" element={<Home/>} />
              <Route path="signin" element={<Signin />} /> // home/signinになる。
          <Route/>
        </Routes>
    </BrowserRouter>

CODE-EGG

homeコンポーネントのどこにsigninを描画するかは、<Outlet/>コンポーネントをHomeコンポーネントでimportして指定する

const Home = () => {
  <div>
     <Outlet/>// ここにSigninコンポーネントが描画される
  </div>
}

CODE-EGG

<Link>コンポーネントでクリック遷移することができる。

<Link to="home">クリック</Link>

CODE-EGG

Linkではなく命令的に遷移するにはuseNavigate()を利用する。v5ではuseHistoryだった。

const navigate = useNavigate();

navigate("/home",);

CODE-EGG

navigate(-1)やnavigate(-2)で戻る機能を実装できる。
進むならnavigate(1)

CODE-EGG

Promptというコンポーネントはなくなった？
ナビゲーションを止めたりする処理は独自で実装する必要がある。

CODE-EGG

React router dom v6についてのメモ

基本形

v5についての記事