React 빌드, 하위 디렉토리로 라우팅되도록 변경하는 법

시작하기 전

http://localhost 에서 라우팅 되었던 페이지를

https://react-project/post 에서 라우팅 하는 방법을 기록하기 위해 작성했습니다.

1. package.json에 homepage 호스팅 경로를 추가합니다.

{
	"homepage": "https://react-project/post"
}

2. Router 를 사용했다면, App.js를 아래와 같이 변경합니다.

• https://react-project/post

function App() {
	return (
			<Router>
				<Switch>
					<Route path={`${process.env.PUBLIC_URL}`} element={<Main />} />
					<Route path={`${process.env.PUBLIC_URL}/post`} element={<Policy />} />
				</Switch>
			</Router>
	);
}

3. Link 를 사용했다면, 아래와 같이 변경합니다.

• https://react-project/post

<Wrap>
  <Link to={`${process.env.PUBLIC_URL}/post`}>바로가기</Link>
</PolicyLink>