[TS] webpack에서 react‐router‐dom 적용 안됨

# 문제상황

• 라우터 설정을 했음에도 불구하고, 해당 url 로 이동시 페이지 컴포넌트가 렌더링 되지 않음

react-router

import { Outlet, createBrowserRouter } from 'react-router-dom';

import Template from '@/pages/Template';
import TemplateList from '@/pages/TemplateList';

const Layout = () => {
  return <Outlet />;
};

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      {
        path: '/',
        element: <TemplateList />,
      },
      {
        path: 'template',
        element: <Template />,
      },
    ],
  },
]);

export default router;

검색 키워드 : react router, webpack 404

# 원인 분석

이 문제는 웹 서버가 SPA(Single Page Application) 라우팅을 올바르게 처리하지 못할 때 발생합니다. 이 문제는 서버가 /template 경로에 대한 요청을 받았을 때, 해당 경로에 대한 정적 파일을 찾지 못하고 404 오류를 반환하기 때문입니다. React와 같은 SPA에서는 클라이언트 측에서 라우팅을 처리하므로, 서버는 모든 라우트 요청을 index.html로 리다이렉트해야 합니다.

이런 오류를 connect-history-api-fallback 현상이라고 한다. 

1. 개발 서버 설정: 개발 중이라면, webpack-dev-server의 설정을 확인하고, 모든 요청을 index.html로 리다이렉트하도록 설정해야 합니다. webpack.config.js 파일에서 다음과 같이 설정할 수 있습니다:

# 해결방안

module.exports = {
  // ... 기존 설정 ...
  devServer: {
    historyApiFallback: true, // 모든 404 응답을 index.html로 리다이렉트
    // ... 기타 devServer 설정 ...
  },
  // ... 기타 설정 ...
};

historyApiFallback: true 추가하기

historyApoFallback는 HTML5의 history API를 사용할 경우 설정해놓은 url 이외의 url 경로로 접근할 때

404 responses를 받게 되는데 이때도 index.html을 서빙할 지 경정하는 옵션이다.

즉, React에서 react-router-dom이 내부적으로 HTML5 Histroy API를 사용하기 때문에 새로고침을 했을 때도

index.html을 넘겨 원하던 페이지를 보여주게된다.

webpack.config.js에 해당 옵션을 추가해주면 된다.

module.exports = {

  ...

  devServer: {
    historyApiFallback: true,
  },

  ...
}