[React] react-router-dom

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

<Link to="/">Home</Link>
<Link to="/about">About</Link>

• link를 쓰고있다면 반드시 router 안에 넣어야한다.

<HashRouter>
      <Navigation />
  	...
</HashRouter>

• link를 object형태로도 사용할 수 있다.
  https://reactrouter.com/web/api/Link/to-object

<Link to={{
            pathname:"/about",
            state: {
                fromNavigation: true
            }
        }}>
About
</Link>

a태그와의 차이점❓

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