Router - Switch(Route) : v6 업그레이드 소개

※ react-router-dom 설치하기

cmd에 npm install react-router-dom 입력

 

참고도서) 생활코딩! React 리액트 프로그래밍

http://www.kyobobook.co.kr/product/detailViewKor.laf?mallGb=KOR&ejkGb=KOR&barcode=9791158392376 

생활코딩! React 리액트 프로그래밍 - 교보문고

 

 

p259 Switch컴포넌트를 이용해 exact라는 속성을 사용하지 않는 효과를 내고 있다.

function App() {

  return (

    <div>

      <h1>Hello React Router DOM</h1>

      <ul>

        <li><a href="/">Home</a></li>

        <li><a href="/topics">Topics</a></li>

        <li><a href="/contact">Contact</a></li>

      </ul>

      <Switch>

        <Route exact path="/"><Home></Home></Route>

        <Route path="/topics"><Topics></Topics></Route>

        <Route path="/contact"><Contact></Contact></Route>

        <Route path="/">Not Found</Route>

      </Switch>

    </div>

  );

}

 

하.지.만. 

교재와 같이 위와 같은 코드를 입력하면 오류가 발생한다.

또한, 'Switch' is not exported from 'react-router-dom' 에러 메세지창이 뜬다.

 

이는 react가 v6버전으로 업그레이드 되면서 Switch 컴포넌트와 exact 속성이 없어지고

Routes 컴포넌트를 사용하기 때문이다. 

 

위 function App() 내용을 아래와 같이 수정해주면 문제는 해결된다.

 

 

import { BrowserRouter, Route,Routes } from "react-router-dom";

function App() {

  return (

    <div>

      <h1>Hello React Router DOM</h1>

      <ul>

        <li><a href="/">Home</a></li>

        <li><a href="/topics">Topics</a></li>

        <li><a href="/contact">Contact</a></li>

      </ul>

      <Routes>

        <Route exact path="/" element={<Home />} />

        <Route path="/topics" element={<Topics/>} />

        <Route path="/contact" element={<Contact/>} />

        <Route path="/*" element={<NotFound/>}/>

      </Routes>

    </div>

  );

}