react-router-dom etc

1. URL 파라미터와 쿼리 사용법

1) URL 파라미터

URL이 /profile/sujeong과 같은 형식으로 이루어 진 것.

match.params를 사용하여 URL에 있는 파라미터를 가져올 수 있다.

import React from 'react';

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

// App.js
<Route path="/profile/:username" component={Profile} />

2) URL 쿼리

URL이 /about?detail=true 와 같은 형식으로 이루어진 것.

location.search을 사용하여 가져올 수 있다. 가져온 값은 문자열이다.

문자열은 값을 사용하기 불편하므로 qs 등의 라이브러리를 이용하여 문자열을 객체로 변환 후, 사용한다.

그러나 쿼리의 파싱 결과 값도 문자열이므로 데이터형에 맞는 비교과정이 필요하다.

즉, ?id=sujeong 은 파싱하면 { id : sujeong } 이 되지만. 값인 sujeong은 여전히 문자열이므로 만일 bool값이거나 숫자비교가 필요하다면 검증이 추가로 필요하다.

import React from 'react';

const About = ({ location }) => {
	const query = location.search;
}

3) 서브라우트

라우트 내부에 또 라우트를 정의하는 것.

= 라우트로 사용되고 있는 컴포넌트 내부에 라우트 컴포넌트를 또 사용하는 것.

import React from 'react';

const Profile = () => {
	<div>
    	<h3>사용자목록:</h3>
        <ul>
        	<li><Link to="/profiles/sujeong">sujeong</Link></li>
        </ul>
        <Route path="/profiles" exact render={() => <div>no user</div>} />
        <Route path="profiles/:username" component={Profile} />
    </div>
}

// App.js
// <Route path="/profile/:username" component={Profile} /> 아래와 같이 변경
<Route path="/profiles" component={Profiles} />

2. withRouter

withRouter함수는 HoC입니다.

라우트로 사용된 컴포넌트가 아니어도 match, location, history객체에 접근 가능하게 해 줍니다.

withRouter를 사용하면 현재 자신을 보여주고 있는 라우트 컴포넌트를 기준으로 match가 전달된다는 점에 유의.

import React from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router";

// A simple component that shows the pathname of the current location
class ShowTheLocation extends React.Component {
  static propTypes = {
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired,
    history: PropTypes.object.isRequired
  };

  render() {
    const { match, location, history } = this.props;

    return <div>You are now at {location.pathname}</div>;
  }
}

// Create a new component that is "connected" (to borrow redux
// terminology) to the router.
const ShowTheLocationWithRouter = withRouter(ShowTheLocation);