19.5 리액트 라우터가 있는 SPA 다중 페이지 구축하기: 경로 구성에 Switch 및 exact 사용하기(feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

Switch 및 exact 사용하기

아래의 Route 경로 설정을 보면 

path의 경로가 products 가 2개이며 하나는 params의 키로 productId 를 가지고 있다.

import { Route } from "react-router-dom";

import Welcome from "./pages/Welcome";
import Products from "./pages/Products";
import ProductDetail from "./pages/ProductDetail";
import MainHeader from "./components/MainHeader";

function App() {
  return (
    <div>
      <MainHeader />
      <main>
        <Route path="/welcome">
          <Welcome />
        </Route>
        <Route path="/products">
          <Products />
        </Route>
        <Route path="/products/:productId">
          <ProductDetail />
        </Route>
      </main>
    </div>
  );
}

export default App;

 

이 상태의 렌더된 브라우저를 보자

http://localhost:3000/products/p3 로 접속한다.

A Book 은 p1

A Carpet 은 p2

An Online Course 는 p3 로 경로가 되어있으며 아래의 출력화면은 우리가 원하는 사항이 아니다.

http://localhost:3000/products/p3

이제 App.js 에서 Switch를 사용해보자

react-router-dom 에서 받아온다.

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

그리고  모든 라우터를 래핑한다.

function App() {
  return (
    <div>
      <MainHeader />
      <main>
        <Switch> // 스위치
          <Route path="/welcome">
            <Welcome />
          </Route>
          <Route path="/products">
            <Products />
          </Route>
          <Route path="/products/:productId">
            <ProductDetail />
          </Route>
        </Switch> // 스위치
      </main>
    </div>
  );
}

다시 http://localhost:3000/products/p3 으로 가면 Product Detail 과 parmas 의 키값이 사라져 있다.

마지막으로 products 경로의 시작이 되는 부분에 exact 를 props 로 추가한다.

function App() {
  return (
    <div>
      <MainHeader />
      <main>
        <Switch>
          <Route path="/welcome">
            <Welcome />
          </Route>
          <Route path="/products" exact> // props로 exact 추가
            <Products />
          </Route>
          <Route path="/products/:productId">
            <ProductDetail />
          </Route>
        </Switch>
      </main>
    </div>
  );
}

다시 http://localhost:3000/products/p3 으로 접속하면

아래의 화면만 렌더링 된 것을 볼 수 있다.  

http://localhost:3000/products/p3

이제 switch와 exact 를 사용하여 우리가 원하는 렌더링을 할 수 있게 되었다.