본문 바로가기

React

Router

라우팅
주소에 따라 다른 뷰를 보여주는것
리액트엔 기능이 없어서 react-router-dom 사용


 

Router

Header.js 에서 <Link to="/"> 링크 클릭시 url로 이동 =>

Router.js 에서 해당 url에서 보여질 파일을 연결해줌

 

path: 주소창

component: 실행 될 파일

 

Link (Header.js 에서 사용) 는 Router 안에 있어야 한다.

 

ex)

1
2
3
4
5
6
    <Router>
      <Header />
      <Route path="/" exact component={Prices} />
      <Route path="/exchanges" component={Exchanges} />
      <Route path="/coins" exact component={Coins} />
    </Router>
 

 


path 뒤에 exact 붙으면 :
주어진 경로가 정확해야 컴포넌트로 이동
ex )  path="/" exact component={Home}

 



Redirect
Route 중에서 일치하는게 하나도 없으면
어느 페이지든 받아서 / (Home)으로 보내줌



fragments
<> </>


참조 블로그

https://velog.io/@ki_blank/React-Router-1.-8njzuummrs

'React' 카테고리의 다른 글

Class constructor에서 super()의 사용  (0) 2019.11.25
Container Presenter Pattern  (0) 2019.11.24
Axios  (0) 2019.11.22
React에서 CSS 적용하기  (0) 2019.11.21
component, Component Life Cycle, state , setState  (0) 2019.11.12