[React] Route가 변했어요

React에서는 페이지 간의 이동을 Route로 지원하고 있다.

그 중에서 react-route-dom이라는 라이브러리를 제공하고 있고, 이를 많이들 install해서 사용하고 있다.


관련 자료들도 많이 있고, 검색 한 번만 해도 많은 사람들이 기록한 정보들을 볼 수 있다.

그러나 처음 써보는 사람뿐만이 아닌, route를 사용해 본 사람들에게도 혼란을 또는 당황스러움을 주는 경우가 있다.

바로 위와 같은 경우이다. Switch를 사용하여 route를 사용하던 때가 있었지만, 현재는 이를 사용하고 있지 않다. 하지만 많은 곳에서는 Switch를 사용하여 route를 설명하는 글이 존재한다.

import React from "react";
import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
import HomePage from "./pages/HomePage";
import Test from "./pages/Test";
const Routers = () => {
    return (
        <Router>
            <Routes>
                <Route path='/' element={<HomePage />} />
                <Route path='/Test' element={<Test />} />
            </Routes>
        </Router>
    );
}

export default Routers

위와 같이 Switch를 Routes로 수정하게 되면, 앞서 본 오류를 해결할 수 있다.

또한, component 라는 속성이 element라는 속성으로 바뀌게 되었고, 태그 자체를 넣는 것으로 변경되었다.