React | 모바일, 데스크톱기기 구분하여 url 리다이렉트 시키기

이슈

도메인을 PC용, 모바일용으로 분리하면서 모바일 기기에서 PC 도메인으로 접속 시에 css가 깨져 보이고, pc버전과 같은 api를 쓰기 때문에 리다이렉트 하는 주소를 맞춰주어야 하는 이슈가 생기면서 모바일 기기로 PC url을 접속하면 모바일 url로 리다이렉트를 시켜야 하는 필요성이 있었습니다. 고정 메인 도메인으로만 이동하는 것이 아닌, path와 query도 동일하게 변경되어야 했습니다.

 

목적

모바일 기기에서 PC 도메인에 접속 시, 모바일 도메인으로 변경하기. (PC 프로젝트에서 작업)

https://domain.com/search?login=success
⬇️
https://m.domain.com/search?login=success

 

방법

src> index.tsx 에서 useAgent를 사용하여 모바일 기기인지 PC인지 확인 후, PC도메인을 모바일 도메인으로 변경시켜 줍니다. 

import React from 'react';
import { createRoot } from 'react-dom/client';
import Router from './Router';

const isMobile = window.navigator.userAgent.indexOf('Mobi') > -1 ? true : false;

const container = document.getElementById('root');
const root = createRoot(container!);

if (!isMobile) {
  root.render(
    <React.StrictMode>
      <Router />
    </React.StrictMode>
  );
} else {
  window.location.replace(
    window.location.href.replace(
      'https://www.domain.com',
      'https://m.domain.com'
    )
  );
}