[React] React에서 모바일, PC버전 각각 다른 페이지로 라우팅하기

React로 작업하던 중, PC와 모바일에서 다른 형식으로 화면을 띄우고 싶어서 찾아봄!

 

$ npm install react-device-detect

일단 패키지부터 설치.

이거 쓰면서 알게됐는데 npm 5버전부터는 --save 옵션이 기본 적용이라 쓸 필요가 없더라.

 

---

 

그리고 App.js 상단에

import {
  BrowserView,
  MobileView,
  isBrowser,
  isMobile,
} from "react-device-detect";

이거 추가해주고..

 

 

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Iphone />} />
      </Routes>
    </BrowserRouter>
  );
}

원래 이랬던 애들을

function App() {
  return (
    <BrowserRouter>
      if(isMobile)
      {
        <Routes>
          <Route path="/" element={<Iphone />} />
        </Routes>
      }
      else
      {
        <Routes>
          <Route path="/" element={<Web1920_1 />} />
        </Routes>
      }
    </BrowserRouter>
  );
}

이런 식으로 바꿔주면 된다.

 

<BrowserView> </BrowserView> <MobileView> </MobileView> 이용해서 해도 되고... 그건 알아서.

다른 자세한 용법은 공식 페이지 참조.

 

Reference

npm 패키지 공식 문서

https://www.npmjs.com/package/react-device-detect