[React] Routing 안 될 때 (App.tsx 루트 문제)

지금까지는 하나의 페이지에서만 개발을 진행해왔는데, 라우팅을 한 번 해보기로 했습니다.

react-router-dom의 문서를 읽고, 여러 블로그도 참고해서 + 들었던 강의를 참고해서 기본 라우팅 셋팅을 했습니다.

문제정의

라우팅 코드를 다 작성했는데 라우팅이 안 됩니다.

문제코드

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import GoogleLogin from 'components/GoogleLogin/GoogleLogin';
import Login from 'Login/Login';
import Main from './App.tsx';

function App() {
  return (
    <Routes>
      <Route path="/redirect" element={<GoogleLogin />} />
      <Route path="/login" element={<Login />} />
      <Route path="/" element={<Main />} />
    </Routes>
  );
}

export default App;

그런데 라우팅이 안 되었습니다.

도대체 왜,,? 라고 고민을 하며 몇 날 며칠을 보내던 와중..

문제를 해결했습니다 !

원인 추론

bottom-up 방식으로 조사해보았습니다.
정말 바보같은 실수를 했더라구요 ..^^
원래 한 개의 페이지로만 구성됐던 것이기 때문에 라우팅을 위해 기존 App.tsx 파일을 Main.tsx로 변경 후 App.tsx를 새로 만들어서 그 곳에 라우팅 코드를 작성했습니다.
그런데 새로 만든 App.tsx에서 Main 코드를 잘못 import 했던 것이었습니다.

해결코드

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import GoogleLogin from 'components/GoogleLogin/GoogleLogin';
import Login from 'Login/Login';
import Main from './Main';

function App() {
  return (
    <Routes>
      <Route path="/redirect" element={<GoogleLogin />} />
      <Route path="/login" element={<Login />} />
      <Route path="/" element={<Main />} />
    </Routes>
  );
}

export default App;