쿠...sal: [컴][웹] React Route 에서 route 사용

jsx 와 ES6( ECMAScript 2015) 를 사용했다.

Migration for v4

react-router v4 는 많이 달라졌다. 그래서 아래처럼 v2, v3 에서의 migration 방법을 제공한다.

react-router/migrating.md at master · ReactTraining/react-router

<Router>

<Router> 종류가 3가지가 되었다. v3 에서는 <Router> 하나로 시작해서 children 에서 어떻게 동작하는지 정해줘야 했지만, v4에서는 마음대로 <Router> 를 사용할 수 있다. 3가지 <Router> 는

<BrowserRouter> : browser history 를 만든다.
<HashRouter> : hash history 를 만든다.
<MemoryRouter> : 메모리 history 를 만든다.

단, <*Router> 는 1개의 child 만 가질 수 있다. 그래서 만약 <Router> 가 2개의 <Route> 을 갖는 경우에는 <div> 로 묶어야 한다.

<Route>

<Route> 가 component 가 됐다. 이전에는 component 인척 했지만, 다른 reactjs component 처럼 사용할 수는 없었다. 하지만 이제는 다른 reactjs component 안에서 사용할 수 있다.

react-router-dom

react-router 를 browser 에서 사용하려면 react-router-dom 만 사용하면 된다. react-router 가 react-router-dom 안에도 들어가 있다.

what's the diff between `react-router-dom` & `react-router`? · Issue #4648 · ReactTraining/react-router

sample github

https://github.com/i5on9i/ts-react-webpack/releases/tag/ts-react-webpack-jest-cssloader-router

Route

reactjs 의 route 을 사용하려면 react-router 를 설치해야 한다. npm 으로도 설치할 수 있다.

import { Router, Route, IndexRoute, Link, hashHistory, withRouter  } from 'react-router'
...
document.addEventListener("DOMContentLoaded", function() {
    ReactDOM.render(
        <Router history={hashHistory}>
            <Route component={LoginContainer} >
                <Route path='/' component={RbLogin} />
                <Route path='/findpw' component={FindPw} />
                <Route component={Container} >
                    <Route component={ProcessNav} />
                    <Route component={Content} >
                        <Route path='/reg' component={Terms} />
                        <Route path='/reg-input' component={PersonalInfo} />
                        <Route path='/reg-complete' component={DoneRegistration} />
                    </Route>
                </Route>
            </Route>
        </Router>
        ,
        document.getElementById('content'));
});

<Link>

위처럼 설정해 놓은 path 는 <Link> 를 사용해서 이동하면 된다. 참고로, 여기서 Link 는 <a> tag 로 변경된다.

  <Link to='/'>
    <button className={cancelClass}>
      취소
    </button>
  </Link>

parameter 를 넘겨줄때는 아래처럼 하면 된다.

  <Link to={pathname:'/newpage', query:{param1:['a', 'b'], param2: 'c'}}>
    <button className={cancelClass}>
      취소
    </button>
  </Link>

                ||
                \/

<a href="#/newpage?param1=a&param1=b&param2=c">
  <button ...>
      취소
  </button>
</a>

Parent component

위의 code 는 보면 대충 이해가 갈 듯 하다. 다만 아래 부분에 대해 조금 설명이 필요할 듯 하다.

<Route component={Content} >
  <Route path='/reg' component={Terms} />
  <Route path='/reg-input' component={PersonalInfo} />
  <Route path='/reg-complete' component={DoneRegistration} />
</Route>

위처럼 Route 가 또다른 Route 를 가질 때의 component 는 아래 code 처럼 children 에 대한 처리가 필요하다.

class Content extends React.Component{
 constructor(props) {
  super(props)
  this.state = {}
 }

 render(){
  let shows = [false, false, false]
  for(var i=0, len=shows.length; i<len; i++){
   if(i === this.props.step){
    shows[i] = true
   }
  } 
  return(
   <div className={styles.content}>
    {this.props.children}
   </div>
  );
 }

}
Content.propTypes = {
 step: React.PropTypes.number,
}
Content.defaultProps = {
 step : 0
}

javascript 에서 이동

그리고 만약 <Link> 로 이동을 하는 것이 아니라 javascript 를 통해 url 을 변경하려고 한다면, ~~아래처럼 this.router.history.push() 를 이용하자.~~

this.router.history.push() 는 앞으로 없어질지도 모른다고 한다. 아래 link 에 따르면 withRouter 를 사용하는 것이 좋다고 한다. 자세한 것은 아래 링크를 참고하자.

https://stackoverflow.com/a/42716055

class CancelConfirmButton extends React.Component{
    constructor(props, context) {
        super(props)
        this.state = {}
        this.router = context.router
    }

    render(){
        let cancelClass = 'btn'
        if(this.props.onlyConfirm){
            cancelClass += ' hidden'
        }

        return (
            <div className={styles.buttonBox}>
                <Link to='/'>
                    <button className={cancelClass}>
                        취소
                    </button>
                </Link>
                <Link to={this.props.nextTo} onClick={this.onClick.bind(this)}>
                    <button className={`${styles.confirmButton} btn`} >
                        확인
                    </button>
                </Link>
            </div>
        );
    }

    onClick(e){
        if(this.props.condition && this.props.condition()){
            // this.router.history.push(this.props.nextTo)
            // --> 이것은 여기서 사용할 필요가 없다. 그냥 사용예로 넣어둔다.
            return

        }
        e.preventDefault() // not to move to the link 'nextTo'
        return
    }
}
CancelConfirmButton.propTypes = {
    nextTo: React.PropTypes.string,
    onlyConfirm: React.PropTypes.bool,
    onClickOfConfirm: React.PropTypes.func,
}

CancelConfirmButton.defaultProps = {
    onlyConfirm: false
}

CancelConfirmButton.contextTypes = {
    router: React.PropTypes.object.isRequired,
 }

쿠...sal

[컴][웹] React Route 에서 route 사용