본문 바로가기
Today I Learned

[ TIL ] github.io 배포 하얀 화면

by 질서정연_ 2023. 4. 18.

 

깃헙 io로 배포하는데 아무리 기다려도 흰 화면만 나오고 로컬환경에서 잘 나오던 화면이 나오지 않았다.

 

https://medium.com/@_diana_lee/react-react-router-%EC%A0%81%EC%9A%A9%ED%95%9C-react-%EC%95%B1%EC%9D%84-github-pages%EB%A1%9C-%EB%B0%B0%ED%8F%AC%ED%95%98%EB%8A%94-%EB%B2%95-5f6119c6a5d9

 

[React] react-router 적용한 React 앱을 github pages로 배포하는 법

이 글은 당신이 create-react-app과 react-router를 사용 중이라고 가정하고 있습니다

medium.com

 

<BrowserRouter basename={process.env.PUBLIC_URL}>
    <Routes>
        <Route path="/" element={<Home />}/>
        <Route path="/weather" element={<Weather />}></Route>
    	<Route path="/todoList" element={<TodoList />}></Route>
    </Routes>
</BrowserRouter>

 

BrowserRouter 에 basename 을 추가해줘야 한다고 한다. 

process.env.PUBLIC_URL 은 내가 package.json 에서 homepage 에 넣어준 githubio 배포 주소가 된다.

 

https://jjluveeecom.tistory.com/53

 

리액트 초기 폴더 구조 및 Router 설정 :: react-router-dom, BrowerRouter

폴더 구조 저는 폴더 전체 구조를 잡을 때 apis, assets, pages, components, styles 폴더로 나누고, 그 안에 index.js 파일로 관리합니다. pages 폴더에는 말 그래도 웹에 띄우는 페이지 단위가 들어갑니다. compo

jjluveeecom.tistory.com

 

댓글