[프론트엔드] react router v6 Switch

이전 글

• 2022.03.21 - [프론트엔드/React] - [프론트엔드] react router v6 withRouter

 

 

 

1.  Switch  사용 예제

 

- App.js

 

 

v6 버전에서 Switch 사용하려면 Routes로 라우팅 경로만 설정해주면 된다.

 

Routes를 아래처럼 분리한 후 전체경로를 기준으로 보여줄 내용을 html 태그로 설정한다.

아래왁 같이 작성함으로써 Swtch 기능을 사용한 예외처리가 동일하게 가능하다.

 

 

import React from 'react';
import {Link, Route, Routes} from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profiles from './Profiles';
import HistorySample from './HistorySample';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
        <li>
          <Link to="/profiles">프로필</Link>
        </li>
        <li>
          <Link to="/history">History 예제</Link>
        </li>
      </ul>
      <hr/>
    <Routes>
      <Route path="/" element={<Home />}  exact={true}/>
      <Route path="/about" element={<About />} />
      <Route path="/info" element={<About />} />
      {/* 서브라우팅 */}
      <Route path="/profiles/*" element={<Profiles />} />
      <Route path="/history" element={<HistorySample />} />
      <Route path="/*" element={<h1>404 페이지를 찾을 수 없습니다.</h1>} />
    </Routes>
    </div>
  );
};

export default App;

 

 

2.  화면  결과

 

 

- 잘못된(없는) 페이지 접근 예외처리