[트러블슈팅] Link 태그 오류

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

🤔 원인

// App.jsx
const App = () => {
    return (
        <>
            <GlobalStyle /> 
        	// Layout 컴포넌트 안에서 Link태그 사용
            <Layout>
              	// Router가 Layout을 감싸고 있지 않음
                <Router />
            </Layout>
        </>
    );
};

// Router.jsx
const Router = () => {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<HomePage />} />
            </Routes>
        </BrowserRouter>
    );
};

당시 이러한 구조로 작업을 하고 있었는데 Layout 컴포넌트에서 Link태그를 사용하니까 위와 같은 오류가 발생했다.
Link태그를 사용하는 컴포넌트(Layout)를 Router로 감싸지 않아 생긴 문제였다.

✅ 해결

// App.jsx
const App = () => {
    return (
        <>
            <GlobalStyle />
            <Router />
        </>
    );
};

// Router.jsx
const Router = () => {
    return (
      	// Router가 Layout을 감싸고 있음
        <BrowserRouter>
        	// Layout컴포넌트에서 Link태그 사용 가능
            <Layout>
                <Routes>
                    <Route path="/" element={<HomePage />} />
                </Routes>
            </Layout>
        </BrowserRouter>
    );
};

프로젝트를 생성할 때 "BrowserRouter가 Layout을 꼭 감싸고 있어야 하는 걸까?"하는 의문이 들어 감싸지 않고 작업을 했더니 오류가 발생했다.
Layout 컴포넌트를 Router가 감싸고 있어야 Link를 사용할 수 있다는 것을 까먹지 말고 다음엔 꼭 Router가 감싸고 있게 구조를 짜자.