ReactでLinkを使って"Cannot destructure property 'basename' of 'React.useContext(...)' as it is null."が発生した時の対処法 #React

はじめに

現在Reactを学習中。
ReactでLinkを使用した際にエラーが発生したのでその対処法をまとめる。

問題

Link使用時に下記エラーが発生した。

Cannot destructure property 'basename' of 'React.useContext(...)' as it is null.

解決

LinkはReactRouterの機能のため、Linkを使用できるのは<BrowserRouter></BrowserRouter>で囲われた範囲内のみ。
というわけでBrowserRouterでAppの中身を囲ってあげると解決する。

import { BrowserRouter } from "react-router-dom";

export const App = () => {
    return (
        <BrowserRouter>
            //Linkを使用しているその他のコンポーネント
        </BrowserRouter>
    )
}