[React Router][Webpack] 중첩 라우팅 사용 시 404 Not Found 오류

React Router nested routes 404 Not Found Error

React Router 중첩 라우팅

React Router로 중첩 라우팅을 하면 아래와 같이 작성할 수 있다.

import { Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path='admin' element={<Admin />}>
        <Route path='all-problems' element={<AllProblems />} />
      </Route>
	...
    </Routes>
  );
}

 

 

React Router nested routes 404 Not Found Error

/admin 경로로 접속한 뒤 새로고침을 하면 문제없이 제대로 작동한다.

하지만 /admin/all-problems 경로로 접속한 뒤 새로고침을 하면 404 Not Found 에러가 발생한다.

 

 

해결 방법

script의 src를 절대경로로 설정해준다.

index.html의 script 태그의 경로가 절대 경로로 설정되어있는지 확인해야한다.

 

이 이슈는 react router FAQ에도 작성되어있다.

GitHub - remix-run/react-router: Declarative routing for React

 

// index.html
...
<script src="app.bundle.js"></script>
...

<script src="app.bundle.js"></script>로 작성되어 있기 때문에 

중첩 라우팅시에 admin/index.html에서 app.bundle.js를 요청한다.

즉, admin/app.bundle.js를 요청한다.

 

따라서 src 경로를 절대 경로로 변경해주어야한다.

// index.html
...
<script src="/app.bundle.js"></script>
...

 

Webpack에서 절대경로로 변경하기

import { resolve } from 'node:path';

import paths from './paths.js';

const commonConfig = {
  ...
  entry: {
    app: paths.src,
  },
  output: {
    path: paths.build, // resolve('dist')
    filename: '[name].bundle.js',
    publicPath: '/',
    clean: true,
  },
  ...
};

export default commonConfig;

publicPath: '/'를 추가해주면 된다.

 

output.path 폴더로 내보내는 모든 파일은 output.publicPath를 참조한다.

 

https://webpack.kr/guides/public-path/#root

Public Path | 웹팩