• 목차

개요

• 라우터를 추가해보자.

• 라우터는 URL 에서 변화를 감지하고, URL 에 기초하여 화면에 보이는 내용을 변경해준다.

• 라우팅 툴을 사용할 수 있도록 react-router-dom 패키지를 설치해보자.

  npm isntall react-router-dom@5
  

라우팅

• 리액트에게 어떤 컴포넌트를 어떤 경로, 어떤 URL에 로딩할지 인지하도록 해야 한다.
• src/components : 컴포넌트 안에 임베드될 컴포넌트들 저장
• src/pages : 페이지로 로딩될 컴포넌트들 저장 (특정 URL 방문 시 라우터가 로딩 할 컴포넌트)

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom'

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <BrowserRouter>
        <App />
    </BrowserRouter>
);

App.js

import {Route, Switch} from "react-router-dom";
import AllMeetupsPage from "./pages/AllMeetups";
import NewMeetupsPage from "./pages/NewMeetup";
import FavoritesPage from "./pages/Favorites";

function App() {
  return (
      <div>
          <Switch>
            <Route path={'/'} exact={true}>
              <AllMeetupsPage />
            </Route>
            <Route path={'/new-meetup'}>
              <NewMeetupsPage />
            </Route>
            <Route path={'/favorites'}>
              <FavoritesPage />
            </Route>
          </Switch>
      </div>
  );
}

AllMeetupsPage.js NewMeetupsPage.js FavoritesPage.js

function AllMeetupsPage() {
    return <div>All Meetups Page</div>
}

export default AllMeetupsPage;

function NewMeetupsPage() {
    return <div>New Meetups Page</div>
}

export default NewMeetupsPage;

function FavoritesPage() {
    return <div>Favorites Page</div>
}

export default FavoritesPage;

• Route 컴포넌트는 URL 내의 각기 다른 경로를 정의하고 또, 각 경로 별로 어떤 컴포넌트들 로딩할 건지 결정한다.
• Switch 컴포넌트를 사용하면 Route 중에서 단 하나만 활성화할 수 있다.
  • 하지만 예상한 결과와 다르게 Switch 는 루트 경로(/)를 매칭 시키고 멈춰버린다.
  • /favorites 로 접속하여도 루트 경로(/) 에 그대로 있는 것을 볼 수 있다.
  • Route 에 exact=true 추가를 통해 / 경로를 매칭하지 않고, 전체 경로를 검색하게 된다.

링크 및 탐색 추가

• 링크를 통해 URL 에 맞는 컴포넌트들을 반환해보자.