"Cannot GET /*" 오류에 대한 React-router와 Webpack-dev-server 문제 해결하기

title_thumbnail(

Table of Contents

React-router “Cannot GET /*” 루트 url을 제외한 모든 url에 대해서 발생하는 오류

React-router를 사용하는 도중 “Cannot GET /inbox” 오류가 발생한다면, 고려할 수 있는 몇 가지 해결책이 있습니다.

해결책 1: webpack-dev-server 사용하기

webpack-dev-server를 사용하고 있다면, history-api-fallback 옵션을 활성화하여 404 오류를 /index.html로 리다이렉트 할 수 있습니다. 이를 위해 webpack 설정 파일에 다음 구성을 추가하세요:

devServer: {
  contentBase: 'app/ui/www',
  devtool: 'eval',
  hot: true,
  inline: true,
  port: 3000,
  outputPath: buildPath,
  historyApiFallback: true,
}

이 옵션을 활성화하면, 비루트 URL에 대해서도 올바르게 라우팅이 처리될 것입니다.

해결책 2: 라우터 위치 확인하기

/inbox에 대한 HTTP 요청을 수행하고 “Cannot GET /inbox” 오류가 발생한다면, 클라이언트 사이드 라우팅을 사용하고 있는 것일 수 있습니다. 적절한 라우터 위치를 사용하고 있는지 확인하세요. 서버 사이드 React를 실행하지 않는다면, 기본 HistoryLocation 대신 HashLocation을 사용하는 것을 고려해보세요.

예시:

import { Router, HashLocation } from 'react-router';

Router.run(routes, HashLocation, (Root) => {
  React.render(<Root />, document.body);
});

서버 사이드 렌더링을 하지 않으려고 하고 browserify를 사용한다면, http://localhost:3000/#/inbox와 같은 적절한 URL로 컴포넌트에 접근했는지 확인하세요.

해결책 3: 해시 히스토리 사용하기

더 간단한 해결책을 찾고 있다면, 해시 히스토리를 사용하도록 변경할 수 있습니다. 이 옵션은 가장 사용자 친화적인 URL을 제공하지는 않지만, “Cannot GET” 오류를 해결할 수 있습니다. SEO가 우선순위인 경우 서버 사이드 렌더링을 구현하는 것도 고려해야 합니다.

해결책 4: 서버에 index 페이지 반환 설정하기

요청한 디렉토리나 파일이 존재하지 않아 404 오류가 발생하는 경우, 서버를 구성하여 항상 인덱스 페이지를 반환하도록 설정할 수 있습니다. 예를 들어, React 앱을 IIS에서 호스팅하고 있다면 다음과 같은 web.config 파일을 추가하여 이를 구현할 수 있습니다:

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <httpErrors errorMode="Custom" existingResponse="Replace">
      <remove statusCode="404" subStatusCode="-1" />
      <error statusCode="404" path="/" responseMode="ExecuteURL" />
    </httpErrors>
  </system.webServer>
</configuration>

이 구성은 서버에게 404 오류 대신 클라이언트에게 메인 페이지(index.html)를 반환하도록 지시합니다.

해결책 5: HashRouter 사용하기

요청에 응답하는 서버와 정적 파일 서빙을 위한 HashRouter를 가지고 있다면, BrowserRouter 대신 HashRouter를 사용하도록 전환할 수 있습니다. 이는 완벽한 해결책은 아니지만, “Cannot GET” 오류를 해결할 수 있습니다. ‘react-router-dom’에서 HashRouter를 가져와서 아래 예시와 같이 사용하세요:

render() {
  return (
    <div>
      <HashRouter>
        <Blog />
      </HashRouter>
    </div>
  );
}

BrowserRouter를 HashRouter로 대체함으로써 “Cannot GET” 오류를 피할 수 있습니다.

React-router에서 발생하는 “Cannot GET” 오류를 해결하는 데에 위의 해결책들 중 적절한 것을 선택하여 사용하시기 바랍니다. 행복한 코딩하세요!

참고 자료 :

reactjs

“Cannot GET /*” 오류에 대한 React-router와 Webpack-dev-server 문제 해결하기