(클릭해서 해결방법부터 보기)
1. 개요
React + Vite + TS 로 구성된 프로젝트를 진행하면서, 여느때와 같이 router를 설정하였다.
browserRouter를 사용하였는데, 그 당시 설정한 router 파일은 다음과 같다.
import ChildPage from '@pages/ChildPage'
import DispatchPage from '@pages/DispatchPage'
import DriveHistoryPage from '@pages/DriveHistoryPage'
import Error404Page from '@pages/ErrorPage'
import MainPage from '@pages/MainPage'
import OperatePage from '@pages/OperatePage'
import ParentViewPage from '@pages/ParentViewPage'
import SignInPage from '@pages/SignInPage'
import SignUpPage from '@pages/SignUpPage'
import ProtectedRoute from '@routes/ProtectedRoute'
import App from 'App'
import { createBrowserRouter } from 'react-router-dom'
const router = createBrowserRouter([
{ path: '/parent-view/:uuid', element: <ParentViewPage /> },
{
path: '/',
element: <App />,
children: [
{
path: 'signup',
element: <SignUpPage />,
},
{
path: 'signin',
element: <SignInPage />,
},
{
element: <ProtectedRoute />,
children: [
{
index: true,
element: <MainPage />,
},
{
path: 'home',
element: <MainPage />,
},
{
path: 'manage',
children: [
{
path: 'child',
element: <ChildPage />,
},
{
path: 'dispatch',
element: <DispatchPage />,
},
{
path: 'operate',
element: <OperatePage />,
},
{
path: 'drive-history/:shuttleId',
element: <DriveHistoryPage />,
},
],
},
],
},
],
},
{
path: '/*',
element: <Error404Page />,
},
])
export default router
<App />
컴포넌트는 다음과 같이 <Outlet />
을 설정해주어 router에 설정한대로 렌더링을 하는것이 목표였다.
function App() {
const location = useLocation()
const hideHeaderPathList = ['/signin', '/signup']
const showHeader = !hideHeaderPathList.includes(location.pathname)
return (
<QueryClientProvider client={queryClient}>
{showHeader && <Header />}
<Outlet />
</QueryClientProvider>
)
}
export default App
그런데 가장 상단에 위치한 컴포넌트만 렌더링되고, 그 밑에 위치한 children 컴포넌트들은 오류가 나면서 렌더링되지 않았다.
물론 local에서 npm run dev
로 실행한 개발모드에서는 잘 되었다.
하지만 jenkins의 pipeline을 타고 nginx로 배포한 결과물은 <App />
컴포넌트만 렌더링되었다.
이러한 pipeline이 구축되어 있고, 빌드가 자동화가 되어있기 때문에 당시에는 로컬에서 빌드해볼 생각을 하지 못했던 것 같다.
이 현상을 발견한 이후에 npm run build
를 한 후, npm run preview
를 통해 빌드한 결과물을 확인해보니 역시나 되지 않았다.
2. 실패 과정
마감 기간안에 빨리 해결을 해야 배포된 환경에서 테스트, 이용을 할 수 있기 때문에 정말 열심히 검색을 했다.
검색한 결과에 대한 다음과 같은 실패 방법들이 존재했다.
(프로젝트 별 환경이 모두 다르기 때문에 제가 진행한 프로젝트에서 실패한 방법이지, 틀린 방법들이 절대 아닙니다!)
1) path 문제
[오류 / React] 배포 시 발생하는 Router path 문제
로컬에선 잘만 됐는데 github pages로 배포했더니 상단 바(Navbar 태그)를 제외한 컴포넌트가 렌더링 되지 않는다!!! URL이 달라졌으니 기존 path 속성이 안 먹힐 수밖에... 이럴땐?! basename={process.env.PUBLIC
gwan.tistory.com
[에러] React 빌드 후 배포 시 흰 화면 오류
프로젝트를 하면서 프로젝트를 빌드한 후 webpack의 devServer를 이용해서 현재 상황을 확인했었다. 근데 어느 순간 부터인가 를 한 후 콘솔을 확인했을 때 다음과 같은 에러를 내뱉었다.오류전에 포
velog.io
2) exact 확인
React Router 왜 계속 Path="/"에 해당되는 컴포넌트만 렌더링될까?
React-Router란? Package : React-Router-Dom React-Router는 React에서의 라우팅 기능을 제공한다. Route요소의 Path속성을 설정하여 각 Path별 컴포넌트를 렌더링 할 수 있다. a요소의 href로 URL을 설정해도 각 URL별
japing.tistory.com
3) BrowserRouter 오류
[React] github pages 배포시 router오류
라우터를 이용한 리액트 서브페이지 작업을 마치고 로컬에서 정상 작동을 확인했으나 gitpage에 올렸더니 작동되지 않았던 문제의 해결과정을 적어보려 합니다. 이래저래 바꿔보다보니 제가 만
modangirl.tistory.com
이외에도 가장 흔한 의견들은 BrowserRouter 대신에 HashRouter를 사용해라" 였다.
하지만 모든 방법은 우리 프로젝트에 적용했을 때 해결되지 않았다.
또한, react-router의 v5의 BrowserRouter
와 HashRouter
는 createBrowserRouter
와 createHashRouter
로 대체되었다.
3. 해결 방법
결론부터 말하자면, react-router 라이브러리 자체의 문제는 아니었다. 컴파일러 버그이다.
해결에 도움이 되었던 글은, react-router 라이브러리 github의 issue에 있는 글이었다.
(역시 뭐든지 공식적인 문서를 보면서 해결하는게 제일 좋은 것 같다.)
[Bug]: Cloudflare Pages - Outlet not working. · Issue #11480 · remix-run/react-router
What version of React Router are you using? ^6.22.3 Steps to Reproduce I am using an normal createReactRouter, and since today it just doesnt work after i run the build command. Expected Behavior U...
github.com
아마 패키지가 업데이트 되면서 생겼던 문제인것 같다.
해결방법은 다음과 같다.
1) npm을 사용할 경우
package.json에 다음을 추가해주면 된다.
"overrides": {
"rollup": "4.15.0"
}
2) yarn을 사용할 경우
package.json에 다음을 추가해주면 된다.
"resolutions": {
"rollup": "4.15.0"
}