React Router 정리

기본적으로 클라이언트사이드 렌더링 하는 SPA 특징을 가진 리액트인데

웹 개발을 하다보면 한 종류의 화면만 사용하지 않기에 React Router을 사용한다.

 

URL 이동시키기

Link

a 태그와 같다. 하지만 SPA 특성상 a 태그처럼 새로고침이 발생하면 안되기에,

a 태그 기반으로 기능상의 개선을 통해 새로고침 없이 다른 뷰를 렌더할 수 있다.

 

Route는 컴포넌트에 기본적으로 match, history, location이라는 것을 넘겨준다.

match 이 객체는 어떤 라우트에 매칭이 되었는지에 대한 정보가 있고 params(/about/:name 형식)정보를 가지고 있다.

history 이 객체를 통해 push, replace를 통해 다른 경로로 이동하거나 앞 뒤 페이지로 전환 할 수 있다.

location 이 객체는 현재 경로에 대한 정보를 지니고 있고 URL 쿼리(/about?foo=bar 형식)정보도 가지고 있다.

 

NavLink

Link와 비슷하지만 만약 설정한 URL이 활성화가 되면, 특정 스타일(activeStyle) 혹은 클래스(activeClassName)를 지정 할 수 있다.

const Menu = () => {
  const activeStyle = {
    color: 'green',
    fontSize: '2rem'
  };
  
  return (
    <div>
      <ul>
        <li><NavLink exact to="/" activeStyle={activeStyle}>Home</NavLink></li>
      </ul>
    </div>
  );
};

 

redirect는 어떠한 주소로 접속시 그것을 다른 주소로 보내주는것이다.

push가 아닌 replace 방식이라 history에 남지 않는다.

location 객체를 통해서도 redirect가 가능 하다.