리액트 라우터3 [React / Router] url 마지막에 있는 slash 없애기 http://localhost:3000/sub/ { const location = useLocation(); // If the last character of the url is '/' if (location.pathname.match("/.*/$")) { return ( ); } else return null; }; export default RemoveEndUrlSlash; 2. app 컴포넌트 내부에 합성 import React, { useEffect } from "react"; import { Outlet, useLocation, useNavigate } from "react-router-dom"; import AppLayout from "./components/AppLayout"; import .. React & Library/Router 2022. 12. 13. [React / Router] v6 - creatBrowserRouter basename (baseURL) 설정 방법 본문 github repository를 이용해서 배포를 해야할 때가 있다. 그럴 때는 아래와 같이 baseURL을 입력해서 root 주소를 설정해주면 된다. import React from "react"; import { createBrowserRouter } from "react-router-dom"; import Coin from "./routes/Coin"; import Coins from "./routes/Coins"; const router = createBrowserRouter( [ { path: "/", element: , }, { path: "/:coinID", element: , }, ], { basename: "/reactMasterCrypto" } // 이 부분 ); export de.. React & Library/Router 2022. 12. 13. Build 이후 흰 화면만 나오는 이유 (로컬 index.html 안열리는 이유, react-router, 파일 프로토콜, http 프로토콜) 개발자 유튜브를 운영중입니다. 구독 부탁드립니다. 리코딩 ReCoding PM으로 일하다 38살에 프론트 엔드 개발자로 전직했어요. 코딩을 모르던 잘 모르는 상태에서 이직을 꿈꾸시는 분들... 그리고, 다시 코딩을 시작해보고 싶으신 분들과 이야기를 나누겠습니다. www.youtube.com 이유를 알기 위해서는 생각보다 조금 더 깊게 학습이 필요했다. package.json에 homepage : "." 코드 한줄만 추가한다고 되는 게 아니었다. (사실, 이 건 필요가 없었다.) cli에서 빌드를 마치고 serve를 설치한 이후에 다음 명령어를 실행을 했어야 했는데, serve -s build 그 이유는 build시에 server에 대한 패키지는 빼고 빌드되기 때문이었다. (이렇게 static server.. React & TypeScript/React 2021. 9. 16. 이전 1 다음