React Router 정리

출처 : velopert wiki

// exact에 따라서 /** or /가 걸졍된다
<Route path="/" component={Home} exact={true}>
<Link to="/about">소개</Link>

@Param 가져오기

const Profile = ({ match }) => {
  const { username } = match.params;
}

/* Profile을 사용하는 곳 */
<Route path="/profiles/:username" component={Profile} />

Query 가져오기 : 라우트 컴포넌트에게 props 전달되는 location 객체에 있는 search 값에서 읽어올 수 있다. 이 값은 문자열로 되어 있어서 qs 라는 라이브러를 사용하면 쉽게 파싱할 수 있다.

const About = ({ location }) => {
  const query = qs.parse(location.search, {
    ignoreQueryPrefix: true
  });
}

서브 라우트는 그냥 Route 컴포넌트를 렌더링 하면 된다.

history 객체

history는 라우트로 사용된 컴포넌트에게 match, location과 함께 전달되는 props중 하나이다.

메소드에서 라우터에 직접 접근할 수 있고 뒤로 가기, 특정 경로로 이동, 이탈 방지 등의 기능을 사용할 수 있다.

• history.push() : 특정 경로로 이동
• history.goBack() : 뒤로 이동
• history.goForward() : 앞으로 이동

오호.. 아주 잘 정리되어 있는 글 https://gongbu-ing.tistory.com/45

withRouter : 라우트 컴포넌트가 아닌 곳에서 match / location / history를 사용할 때 사용할 수 있는 것

import { withRouter } from 'react-router-dom';

const withRouterSample = ({ location, match, histroy }) => {
  return (
    <div>

    </div>
  );
}

withRouter를 사용하면 자신의 부모 컴포넌트 기준의 match 값이 전달된다.

Switch는 여러 Route들을 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링시켜준다.

const App = () => {
  return (
    <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>
  );
}

NavLink는 Link와 비슷한데, 만약 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 클래스를 적용할 수 있는 컴포넌트이다. activeStyle 혹은 activeClassName 등을 적용할 수 있다.

<NavLink
  to="/profiles/gildong"
  activeStyle={{ background: 'black', color: 'white' }}
>

withRouter 대신 Hook을 이용해 구현할 수도 있는데, 아직 리액트 라우터에서 공식적은 Hook 지원은 되지 않고 있다. 하지만 use-react-router 라이브러리를 사용하면 라우터에 관련된 값들을 Hook으로 사용할 수 있다.

import useReactRouter from 'use-react-router';

function RouterHookSample() {
  const { history, location, match } = useReactRouter; // 이런식으로 가져올 수 있다.
  console.log({ histroy, location, match });
  return null;
}

export default RouterHookSample;

이 Hook이 정식 릴리즈는 아니라 withRouter가 너무 불편한 경우에만 사용하는 것을 권장