5. React Router & Routing

3284 단어 ReactReact

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를 깊숙히 넣어주기 위해 계속 전달하는 패턴

좋은 웹페이지 즐겨찾기