1. react-router-dom 업그레이드

최근 버전 6이 나왔다.

한달 전쯤에도 사용하던 라우팅이 적용이 안되어서 원인을 찾아보니,

react-router-dom v.6이상에서는 기존에 사용하던 용어 몇가지가 바뀌었다.

1. Switch → Routes
2. Redirect 사라짐
3. component → element

<Routes>
	<Route path='' element={컴포넌트이름}/>
</Routes>

1. exact 로 path를 특정해 주었던 것이 ⇒ path='/main/*' 와 같은 형식으로 수정됨

https://reactrouter.com/docs/en/v6/upgrading/v5 공식문서 참조

// This is a React Router v6 app
import {
  BrowserRouter,
  Routes,
  Route,
  Link
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users/*" element={<Users />} />
      </Routes>
    </BrowserRouter>
  );
}

function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Routes>
        <Route path=":id" element={<UserProfile />} />
        <Route path="me" element={<OwnUserProfile />} />
      </Routes>
    </div>
  );
}

이러한 문제로, 아직까지는 v5가 많이 쓰일듯 싶어 버전 다운그레이드를 해주었다.