React Router 배포 문제 해결하기: 상대 경로와 basename={process.env.PUBLIC_URL} 사용하기

제목: 상대 경로를 사용한 React Router 배포 문제 해결

이 블로그 포스트에서는 react-router-dom 라이브러리를 사용하여 React 애플리케이션을 상대 경로로 배포할 때 개발자가 직면하는 일반적인 문제에 대해 다루겠습니다. 특히, package.json 파일의 homepage 태그에서 설정한 후에 빌드 및 배포한 후에 라우터가 제대로 작동하지 않는 상황을 해결하는 방법에 대해 논의합니다.

문제 이해

React 애플리케이션을 개발할 때 react-router-dom 라이브러리를 사용하면 라우팅과 탐색을 편리하게 구현할 수 있습니다. 그러나 하위 디렉토리와 같은 상대 경로로 애플리케이션을 배포할 경우 일부 문제가 발생할 수 있습니다. 가장 일반적인 문제 중 하나는 라우터가 상대 경로를 고려하지 않아 링크와 경로가 작동하지 않는 것입니다.

다행히도 이 문제를 코드와 설정을 조금 수정하여 해결할 수 있습니다.

해결책: basename 설정

React Router가 상대 경로와 올바로 작동하도록 하려면 라우터에 basename 속성을 설정해야 합니다. basename은 애플리케이션의 모든 경로에 대한 기본 URL을 지정합니다.

우리의 경우, basename을 package.json 파일에서 정의된 기본 URL을 동적으로 가져오는 process.env.PUBLIC_URL 값으로 설정할 수 있습니다.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <Router basename={process.env.PUBLIC_URL}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

process.env.PUBLIC_URL로 basename을 지정함으로써, 애플리케이션을 상대 경로로 배포할 때 라우트가 올바른 URL과 일치하도록 보장할 수 있습니다. 이 방식은 코드에 기본 URL을 하드코딩할 필요가 없으며, 다양한 배포 환경에 동적으로 대응할 수 있도록 해줍니다.

결론

상대 경로로 React 애플리케이션을 배포하는 것은 react-router-dom 라이브러리를 사용할 때 도전을 초래할 수 있습니다. 그러나 basename 속성을 process.env.PUBLIC_URL로 설정함으로써 라우터가 올바르게 작동하고 경로가 적절한 URL과 일치하는지 보장할 수 있습니다. 이 방식은 React 애플리케이션에서 상대 경로 배포를 처리하기 위한 유연하고 확장 가능한 해결책을 제공합니다.

기억해주세요, 라우터가 상대 경로를 지원하지 않는 문제가 발생할 경우 basename={process.env.PUBLIC_URL} 구성을 사용하면 문제를 해결하고 해결할 수 있습니다.

참고 자료 : 

reactjs