[React] react-router-dom switch, NavLink

Switch는 여러 라우트 중 가장 먼저 매칭된 라우터 하나만을 보여줍니다.

Switch는 어떨 때 유용하냐면, 페이지를 못찾았을 때(404 Not Found) 즉, 페이지가 아무것도 일치하지 않았을 때 보여줄 페이지로 사용하면 유용합니다.

App.js

import React from 'react';
import { Switch, Route, Link } 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">예제</Link>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route path="/" exact={true} component={Home} />
        <Route path="/about" 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;

 

주소를 만약에 localhost:3000/asdsadasd 라고 작성한다라고 했을 때, Switch를사용한다면 Route path에 일치되는 가장 첫번째 라우트를 보여주게 되어있는데, 아무것도 찾지 못했다고 한다면 맨 아래까지 내려가서 path가 없는 Route를 렌더링하게 됩니다.

 

NavLink

Link와 비슷한 컴포넌트인데, 해당 링크의 주소가 현재 주소와 일치한다면 스타일을 변형시킬 수 있습니다.

 

src/Profiles.js

import React from "react";
import Profile from "./Profile";
import { NavLink, Route } from "react-router-dom";

function Profiles() {
  return (
    <div>
      <h3>사용자 목록</h3>
      <ul>
        <li>
          <NavLink
            to="/profiles/meanbymin"
            activeStyle={{ background: "black", color: "white" }}
            activeClassName="active"
          >
            meanbymin
          </NavLink>
        </li>
        <li>
          <NavLink
            to="/profiles/homer"
            activeStyle={{ background: "black", color: "white" }}
          >
            homer
          </NavLink>
        </li>
      </ul>

      <Route
        exact
        path="/profiles"
        render={() => <div>사용자를 선택해주세요</div>}
      />
      <Route path="/profiles/:username" component={Profile} />
    </div>
  );
}

export default Profiles;

이렇게 하면 유저목록을 클릭해서 해당 링크로 갈때 NavLink에서 가리키는 주소와 현재 주소가 일치해져서 해당 유저 목록의 CSS가 변화하는 것을 볼 수 있으며, 클래스 이름도 생성되는 것을 볼 수 있습니다.

 

이 외의 기능들

• Prompt: history.block을 컴포넌트 형태로 구현한 것
• Redirect: 렌더링 되는 순간 다른 페이지로 간다. history.push를 이용한 것과 같다.
• Route Config: routes라는 경로를 작성하여 path에 대한 사전 정의를 하고 한꺼번에 사용하도록 해줍니다.

그 외의 것들은 공식 매뉴얼 을 참고하시길 바랍니다.