13.6.3 Switch

    Switch 컴포넌트는 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만을 렌더링시켜 줍니다. Switch를 사용하면 모든 규칙과 일치하지 않을 때 보여 줄 Not Found 페이지도 구현할 수 있습니다.

    App.js

    import React from 'react';
    import { Route, Link, Switch } 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 />
          <Switch>
            <Route path="/" component={Home} exact={true} />
            <Route path={['/about', '/info']} component={About} />
            <Route path="/profiles" component={Profiles} />
            <Route path="/history" component={HistorySample} />
            <Route
              // path 따로 정의하지 않으면 모든 상황에 렌더링됨
              render={({ location }) => (
                <div>
                  <h2> 페이지는 존재하지 않습니다:</h2>
                  <p>{location.pathname}</p>
                </div>
              )}
            />
          </Switch>
        </div>
      );
    };
     
    export default App;

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.