react-router-domバージョン6になっての実装方法、またchakraUIを使っているときのLinkの書き方

reactでフロントエンドを実装する時にreact-router-domのバージョンが変わっていて実装するときに困ったので、そのときに使った内容をまとめていく。
また、実際に導入して行った時の流れをまとめる。

v5とv6への変更点

routeの書き方

v5

<Route path="/about" component={About} />

v6

<Route path="/about" element={<About />} />

component=がなくなり代わりにelement=になりました。
また、そのときに直接コンポーネントをインポートできるのでかなり直感的に変わっています。

switchの廃止

v5

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/about" component={About} />
</Switch>

v6

<Routes>
  <Route path="/" index element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Switchが廃止され代わりにRoutesになりました。

他にも変更点はありますが詳しくは公式を確認してください。
https://reactrouter.com/en/main

index.tsxのインポートを変更する

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  //react-router-domを使うためにBrowserRouterをラッピング、またChakraUIもラッピング
  <BrowserRouter>
  <ChakraProvider>
    < Router />
  </ChakraProvider>
  </BrowserRouter>
);

BrowserRouterでChakraProviderを囲うようにインポートする。
これでreact-router-domとchakraUIが両方使えるようになる。

コンポーネントでreact-router-domとchakraUIのLinkを使いたいときに使う方法

全体像

import { Link as ReactRouterLink } from 'react-router-dom'
import { Link as ChakraLink } from '@chakra-ui/react'

export const Mycomponent:React.FC = () => {
    return (
        <div>
        <div>
            <ChakraLink as={ReactRouterLink} to="/">home</ChakraLink>
        </div>
        <div>
            <ChakraLink as={ReactRouterLink} to="/about">about</ChakraLink>
        </div>
        </div>
    )
}

export default Mycomponent;

インポートの部分

import { Link as ReactRouterLink } from 'react-router-dom'
import { Link as ChakraLink } from '@chakra-ui/react'

インポートするときにLinkのままだと共に同じLinkになってしまうためLink as ReactRouterLink,
Link as ChakraLinkとする。

呼び出し

<ChakraLink as={ReactRouterLink} to="/">

このようにすることでchakraUIかつ、react-routerであるLinkが作成できる。

最後に

chakraUIを使いつつ、react-router-domを使う書き方はTipsだな〜と思いました。
読んでいただきありがとうございます。