깃허브 데스크탑 - gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기

깃허브 데스크탑으로 프로젝트 관리하기 강의 오픈!! (인프런 바로가기)

 

Git / GitHub 전체 링크

리액트 전체 링크

 

참고

- 리액트 라우터 react router (최신 node ver)

 

- 리액트 프로젝트 추가하기 (new repository)

- gh-pages로 리액트 프로젝트 배포하기

- gh-pages로 배포된 프로젝트에 리액트 라우터 적용하기

- Hash Router로 gh-pages 배포하기

- 404 에러를 수정한 Browser Router로 gh-pages 배포하기

- Github Desktop에서 리액트 프로젝트 받아오기

 

깃허브에 gh-pages에 배포를 하였다면, 리액트 라우터도 아래와 같이 설정해보자.

 

라우팅이 설정되고 아래와 같이 링크를 눌러보면, 경로 설정이 정상적으로 되지 않는다.

 

gh-pages에서 homepage를 설정하면서 생기는 현상이다.

"homepage": "https://bloodstrawberry.github.io/react-hosting"

---

해결방법

 

해결방법은 간단하다.

 

index.js의 BrowserRouter에 basename을 아래와 같이 설정해주면 된다.

process.env.PUBLIC_URL은 위에 설정한 homepage의 URL이 된다.

root.render(
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <App />
  </BrowserRouter>
);

 

설정하면 local에서 아래와 같이 라우팅이 제대로 반영되는 것을 알 수 있다.

---

배포 후 확인

 

빌드 후 배포를 해보자.

npm run build
npm run deploy

 

실제 github 페이지에서도 제대로 라우팅이 반영되었다.

 

전체 코드는 다음과 같다.

 

index.js

//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter basename={process.env.PUBLIC_URL}>
    <App />
  </BrowserRouter>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

App.js

//App.js 
import { Route, Link, Routes } from "react-router-dom";

//routing components
import Home from "./page/Home";
import Router1 from "./page/Router1";
import Router2 from "./page/Router2";

function App() {
  return (
    <div className="App">
      <div>
        <p>
          <Link to="/">홈</Link>
        </p>
        <p>
          <Link to="/r1">Router1</Link>
        </p>
        <p>
          <Link to="/r2">Router2</Link>
        </p>
      </div>
      <div>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/r1" element={<Router1 />} />
          <Route path="/r2" element={<Router2 />} />
        </Routes>
      </div>
    </div>
  );
}

export default App;

 

page/Home.js

import React from 'react';

const Home = () => {
    return (
        <div>
            Home
        </div>
    );
};

export default Home;

 

page/Router1.js

import React from 'react';

const Router1 = () => {
    return (
        <div>
            Router1
        </div>
    );
};

export default Router1;

 

page/Router2.js

import React from 'react';

const Router2 = () => {
    return (
        <div>
            Router2
        </div>
    );
};

export default Router2;