[React] react-router-dom

sunny·2020년 12월 21일
0

💠 React

목록 보기
14/15
post-thumbnail
post-custom-banner

react-router-dom

React의 서드파티 라이브러리로 화면 전환을 도와주는 역할을 한다.

https://reactrouter.com/web/guides/quick-start


설치

npm install react-router-dom

HashRouter

  • 다른 라우터를 사용하기 위해 감싸주어야한다.
  • Hash(#/)로 동작한다.
<HashRouter>
    <Route path="/" component={Home}/>
    <Route path="/about" component={About}/>
</HashRouter>

Router

  • path 속성으로 경로를 지정할 수 있다.
  • 실제 경로와 완벽하게 일치하지 않더라도 포함되는 경우에 렌더링을 실행한다.
    • path가 home/introduction일 경우 home 라우터를 먼저 찾고 introduction라우터를 찾는 방식이므로 home, introduction 각각 2개의 라우터가 불러와짐.
  • 정확하게 일치할때만 렌더링을 하고 싶으면 exact={true} 속성 추가
  • 컴포넌트에 math, history, location 객체를 넘겨줌
<HashRouter>
  <Route path="/" exact={true} component={Home} />
  <Route path="/about" component={About} />
  <Route path="/movie/:id" component={Detail} />
</HashRouter>
  • :id : id 변수 처리

<Link to="/">Home</Link>
<Link to="/about">About</Link>
  • link를 쓰고있다면 반드시 router 안에 넣어야한다.
<HashRouter>
      <Navigation />
  	...
</HashRouter>
<Link to={{
            pathname:"/about",
            state: {
                fromNavigation: true
            }
        }}>
About
</Link>

a태그와의 차이점❓

a태그는 페이지 전체를 새로고침하여 렌더링하는 반면 link는 페이지 전체를 새로고침하지 않고 필요한 부분만 reload한다.

profile
blog 👉🏻 https://kimnamsun.github.io/
post-custom-banner

0개의 댓글