React 공부하기(5) - 리액트 라우터

react-router를 통한 리액트 싱글 페이지 어플리케이션 만들기

 

1. 기본적인 사용법

 

$ yarn add react-router-dom

 

프로젝트에 라우터 적용

<src/index.js>

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'; // * BrowserRouter 불러오기
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

// * App 을 BrowserRouter 로 감싸기
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

serviceWorker.unregister();

 

Route: 특정 주소에 컴포넌트 연결하기

Link: 누르면 다른 주소로 이동시키기

import { Route, Link } from 'react-router-dom';

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

<src/App.js>

import React from 'react';
import { Route, Link } from 'react-router-dom';
import About from './About';
import Home from './Home';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">홈</Link>
        </li>
        <li>
          <Link to="/about">소개</Link>
        </li>
      </ul>
      <hr />
      <Route path="/" exact={true} component={Home} />
      <Route path="/about" component={About} />
      <Route
        path="/profiles"
        exact
        render={() => <div>유저를 선택해주세요.</div>}
      /> // render: 컴포넌트가 아니라 JSX 자체를 렌더링할 수 있다.
    </div>
  );
};

export default App;

exact: 해당 경로만 연결 (/ O /about X)

 

 

2. 파라미터와 쿼리 => 페이지 주소 정의

 

• 파라미터: /profiles/velopert
• 쿼리: /about?details=true

일반적으로 파라미터는 특정 id나 이름을 가지고 조회할 때,

쿼리는 어떤 키워드를 검색하거나, 요청을 할 때 필요한 옵션을 전달할 때 사용

 

파라미터

파라미터를 받아올 땐 match 안에 들어있는 params 값을 참조한다.

match 객체 안에는 현재의 주소가 Route 컴포넌트에서 정한 규칙과 어떻게 일치하는지에 대한 정보가 들어있다.

<src/Profile.js>

const { username } = match.params;

<src.App.js>

<Route path="/profiles/:username" component={Profile} />

 

쿼리

쿼리는 라우트 컴포넌트에게 props 전달되는 location 객체에 있는 search 값에서 읽어올 수 있다.

location 객체는 현재 앱이 갖고있는 주소에 대한 정보를 지니고 있다.

{
  key: 'ac3df4', // not with HashHistory!
  pathname: '/somewhere'
  search: '?some=search-string',
  hash: '#howdy',
  state: {
    [userDefined]: true
  }
}

search가 문자열 형태이기 때문에 객체 형태로 변환해주어야 한다. => qs 라이브러리 사용

$ yarn add qs

<src/About.js>

const query = qs.parse(location.search, {
    ignoreQueryPrefix: true
});
const detail = query.detail === 'true'; // 쿼리의 파싱결과값은 문자열입니다.

 

 

3. 서브라우트 (라우트 내부의 라우트)

 

 

4. 리액트 라우터 부가기능

 

history 객체

우리가 컴포넌트 내에 구현하는 메소드에서 라우터에 직접 접근할 수 있다. (ex 뒤로가기, 특정 경로로 이동, 이탈 방지 등)

<HistorySample.js>

import React, { useEffect } from 'react';

function HistorySample({ history }) {
  const goBack = () => {
    history.goBack();
  };

  const goHome = () => {
    history.push('/');
  };

  useEffect(() => {
    console.log(history);
    const unblock = history.block('정말 떠나실건가요?');
    return () => {
      unblock();
    };
  }, [history]);

  return (
    <div>
      <button onClick={goBack}>뒤로가기</button>
      <button onClick={goHome}>홈으로</button>
    </div>
  );
}

export default HistorySample;

 

withRouter HoC

라우트 컴포넌트가 아닌 곳에서 match / location / history를 사용해야 할 때 사용

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

<WithRouterSample.js>

import React from 'react';
import { withRouter } from 'react-router-dom';
const WithRouterSample = ({ location, match, history }) => {
  return (
    <div>
      <h4>location</h4>
      <textarea value={JSON.stringify(location, null, 2)} readOnly />
      <h4>match</h4>
      <textarea value={JSON.stringify(match, null, 2)} readOnly />
      <button onClick={() => history.push('/')}>홈으로</button>
    </div>
  );
};

export default withRouter(WithRouterSample);

 

Switch

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

=> 아무것도 일치하지 않았을 때 보여줄 Not Found 페이지 구현 가능!

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

<App.js>

<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에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 클랙스를 적용

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

<App.js>

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

 

기타

• Redirect: 페이지를 리디렉트 하는 컴포넌트
• Prompt: 이전에 사용했던 history.block 의 컴포넌트 버전
• Route Config: JSX 형태로 라우트를 선언하는 것이 아닌 Angular 나 Vue 처럼 배열/객체를 사용하여 라우트 정의하기
• Memory Router 실제로 주소는 존재하지는 않는 라우터. 리액트 네이티브나, 임베디드 웹앱에서 사용하면 유용하다.

 

 

5. useReactRouter Hook 사용하기

=> 라이브러리를 설치해서 라우터에 관련된 값(match, history, location 등)들을 Hook으로 사용하기 (공식 X)

=> withRouter랑 목적은 비슷

 

$ yarn add use-react-router

import useReactRouter from 'use-react-router';

<RouterHookSample.js>

import useReactRouter from 'use-react-router';

function RouterHookSample() {
  const { history, location, match } = useReactRouter;
  console.log({ history, location, match });
  return null;
}

export default RouterHookSample;