[React] Switch → Routes로 변경되다

리엑트 components를 생성하고 Route를 사용하여 링크를 연결하려고 했는데 오류가 발생했다.

파일 구조

 

import './App.css';
import Home from "./components/Home";
import Parking from "./components/Parking";
import Search from "./components/Search";
import {BrowserRouter, Switch, Route} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <div className="App">
        <Switch>
          <Route path="/">
            <Home />
          </Route>
          <Route path="/Search">
            <Search />
          </Route>
          <Route path="/Parking">
            <Parking />
          </Route>
        </Switch>
      </div>
    </BrowserRouter>
  );
}

export default App;

처음에는 구글링을 하여 Switch로 route를 구현했는데 react-router-dom에는 없는 기능이라는 오류가 발생했다. 다시 검색을 해보니 react-router-dom이 V6로 업데이트 되면서 Switch의 이름이 → Routes로 변경된 사실을 알게 되었다.

따라서 위 코드를 아래와 같이 수정했다.

import './App.css';
import Home from "./components/Home";
import Parking from "./components/Parking";
import Search from "./components/Search";
import {BrowserRouter, Routes, Route} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
    <div className="App">
      <Routes>
        <Route path="/" element={<Home />} /> 
        <Route path="/Search" element={<Search />} /> 
        <Route path="/Parking" element={<Parking />} /> 
      </Routes>
    </div>
    </BrowserRouter>
  );
}

export default App;

프론트엔드는 기술변화가 빈번하다고 하는데 직접 체감하는 기회가 되었다. 버전이나 기능이 자주 바뀌다 보니 어떤 자료를 보고 공부해야할지도 조금 막막해진 느낌이 들었다.

 

► 버전에 따른 Route 사용법

// React router v4 or v5
<Route path="/" component={Home} /> 

// React router v5.1
<Route exact path="/">
    <Home />
</Route>

// React router v6
<Route path="/" element={<Home />} />