React의 서드파티 라이브러리로 화면 전환을 도와주는 역할을 한다.
https://reactrouter.com/web/guides/quick-start
npm install react-router-dom
#/
)로 동작한다.<HashRouter>
<Route path="/" component={Home}/>
<Route path="/about" component={About}/>
</HashRouter>
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>
router
안에 넣어야한다.<HashRouter>
<Navigation />
...
</HashRouter>
object
형태로도 사용할 수 있다.<Link to={{
pathname:"/about",
state: {
fromNavigation: true
}
}}>
About
</Link>
a태그
와의 차이점❓
a태그는 페이지 전체를 새로고침하여 렌더링하는 반면 link는 페이지 전체를 새로고침하지 않고 필요한 부분만 reload한다.