React

Router

nathaneast 2019. 11. 21. 13:49

라우팅
주소에 따라 다른 뷰를 보여주는것
리액트엔 기능이 없어서 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