13.2.4 Route 컴포넌트로 특정 주소에 컴포넌트 연결

    Route라는 컴포넌트를 사용하여 사용자의 현재 경로에 따라 다른 컴포넌트를 보여 주겠습니다. Route 컴포넌트를 사용하면 어떤 규칙을 가진 경로에 어떤 컴포넌트를 보여 줄지 정의할 수 있습니다.

    사용 방식은 다음과 같습니다.

    예시

    <Route path="주소규칙" component={보여  컴포넌트} />

     

    App.js를 열어서 기존 코드를 모두 제거하고, Route 컴포넌트를 사용하여 방금 만든 Home 컴포넌트 혹은 About 컴포넌트를 보여 주도록 설정해 보세요.

    App.js

    import React from 'react';
    import { Route } from 'react-router-dom';
    import About from './About';
    import Home from './Home';
     
    const App = () => {
      return (
        <div>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </div>
      );
    };
     
    export default App;

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