ReactRouter v6のSwitch⇒Routesでハマったときの解決法

#React Routerのv6を使ってみました

React Router(react-router-dom)を使ってルートパスにログインページ<Login />を置きたい場合、v5まではこんな感じで書いていた。

v5の場合

    <Switch>
       <Route exact path="/">
         <Login />
       </Route>
    </Switch>

しかし、v6の場合Switchが見つからない・・・
#そもそもSwitchがRoutesに変わったらしい
そしてexactもなくなったらしい。v6ではすべて完全一致になるとのこと。
部分一致にしたい場合は"/*"みたいにワイルドカードを指定してあげればいいみたい。
まあここまではいい。

Routesに変更

    <Routes>
       <Route path="/">
         <Login />
       </Route>
    </Routes>

これでいいかなと思いきや、なぜか表示されない・・・
デベロッパーツールでコンソールを覗くと、なにやらエラー吐いとる。

Uncaught Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

もしかして、<Login />がundefinedって言ってる？
調べてみるとこの書き方は出来ないっぽい。

#子ノードに入れるのではなく、element属性に突っ込むとok

v6の場合

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

上記で解決。やっとログインページが見えました。
element属性に突っ込んでやる必要がありました。
すごいシンプルで見やすいかも。