5. React Router & Routing

Udemy - Complete React Developer

5. React Router & Routing

React Router (react-router-dom)

BrowserRouter, Switch, Route, exact, Link
withRouter
routing된 페이지는 아래 세가지를 props로 받는다

ex) 
<Route exact={false} path="/detail/:itemId' /> 
<Link to='localhost:3000/detail/13/1234?month=2020-12#hashhash'>move</Link> 

match

• isExact: 정확한 매칭인지 false
• params: 매칭된 파라메터 { itemId: "13" }
• path: 매칭된 <Route />의 path /detail/:itemId
• url: path로 인해 실제 매칭된 부분 /detail/13

location

• pathname: url /detail/13/1234
• search: query string ?month=2020-12
• hash: 해시 #hashhash
• state: { key, value }

// 보통은  주소string으로 이동하지만
<Link to="/somewhere"/>

// location을 이용할수도 있음
const location = {
  pathname: '/somewhere',
  state: { fromDashboard: true }
}
<Link to={location}/>
<Redirect to={location}/>
history.push(location)
history.replace(location)

history

• push(path [,state]) 이동
• replace(path, [state]) 현재 화면의 주소(, state) 변경
• go(n), goBack() === go(-1), goForward() === go(+1)
• length, action, block, location...

history.location와 location은 내용은 같지만
history는 mutable하기때문에 lifeCycle에서 사용시 조심해야함

componentWillReceiveProps(nextProps) {
  if (nextProps.location !== this.props.location) {
    // navigated!
  }
  if (nextProps.history.location !== this.props.history.location) {
    // alawys false
  }
  
}

용어

HOC : Higher Order Component
Props Drilling/Tunneling : props를 깊숙히 넣어주기 위해 계속 전달하는 패턴