여러가지 페이지를 만들고 싶을 때 router를 사용한다.
[1. 라우터 라이브러리 설치하기]
npm install react-router-dom@5
yarn add react-router-dom@5
[2. index.js 파일에 browserRouter를 설치한다.]
App.js에 있는 <App> 컴포넌트를 index.html에 적어준다.import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App/>
</BrowserRouter>
</React.StrictMode>document.getElementById('root')
);
[3. 페이지를 라우팅한다]
import { Link, Route, Switch } from 'react-router-dom';
function App(){
return (
<div>
<Route path="/">
<div>메인페이지인데요</div>
</Route>
<Route path="/detail">
<div>상세페이지인데요</div>
</Route>
</div>
)
}
(꿀팁!) 좀 더 깔끔하게 사용하기
<Route path="/component" component={Card} ></Route>
<Route path="/component"> <Card/> </Route>
[특징]
exact 를 붙여주면 정확히 일치하는 경우에만 라우팅을 해준다.HashRouter는 사이트 방문시 URL 맨 뒤에 /#/이 붙은채로 시작한다.
BrowserRouter는 사이트 방문시 # 없이 깔끔해진다.
BrowserRouter를 쓰려면 리액트가 전부 라우팅 하도록 서버에서 API 세팅을 잘해주어야 한다.세팅
페이지 이동하기 기능 (1) - Link
[App.js] 파일
<방법 1>
상단메뉴(Navbar)에서 이동 버튼이 될 글자들을 <Link> 태그로 감싼다.
to 속성을 이용해서 경로를 적어준다.
function App(){
return (
<div>
<Navbar>
<Nav.Link> <Link to="/">Home</Link> </Nav.Link>
<Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>
</Navbar>
<나머지HTML/>
</div>
)
}
Detail 글자를 누르면 /detail 경로로 이동한다.Home이는 글자를 누르면 /경로로 이동한다.<방법 2>
html 태그를 링크 태그로 만들어 버린다.
function App(){
return (
<div>
<Navbar>
<Nav.Link as={Link} to="/">Home</Link> </Nav.Link>
<Nav.Link as={Link} to="/detail">Detail</Link> </Nav.Link>
</Navbar>
<나머지HTML/>
</div>
)
}
as라는 것은 react-bootstrap 문법인데, 기본 <a> 대신 사용할 HTML태그 혹은 컴포넌트를 집어넣을 수 있다.페이지 이동하기 기능 (2) - useHistory()
useHistory() 함수를 import한다.
useHistory()는 useState처럼 편리한 일종의 Hook이다.let history 변수에 해당 함수를 저장한다.
이제 history 변수에는 object{} 자료가 저장되며 이 안에는 페이지 이동 내역, 유용한 함수가 저장된다.
onClick={()=>{ history.goBack() } 을 하면 뒤로가기가 실행된다.
import React from 'react';
import { useHistory } from 'react-router-dom';
function Detail(){
let history = useHistory();
return (
<div className="container">
<div className="row">
<div className="col-md-6 mt-4">
<h4 className="pt-5">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="btn btn-danger">주문하기</button>
<button onClick={()=>{ history.goBack() }} className="btn btn-danger">중요
</div>
</div>
</div>
)
};
export default Detail
onClick={()=>{ history.push('/') } 을 하면 커스텀한 페이지로 이동한다.
import React from 'react';
import { useHistory } from 'react-router-dom';
function Detail(){
let history = useHistory();
return (
<div className="container">
<div className="row">
<div className="col-md-6 mt-4">
<h4 className="pt-5">상품명</h4>
<p>상품설명</p>
<p>120000원</p>
<button className="btn btn-danger">주문하기</button>
<button onClick={()=>{ history.goBack() }} className="btn btn-danger">뒤로가기
<button onClick={()=>{ history.push('/') }} className="btn btn-danger">푸시하기
</div>
</div>
</div>
)
};
export default Detail
라우터 하나만 보여주는 기능 - <exact>
정확하게 매칭되는 경우에만 해당 라우터를 보여주는 기능이다.
function App(){
return (
<div>
<Route exact path="/">
/로 이동
</Route>
<Route exact path="/detail">
<Detail/>
</Route>
</div>
)
}
라우터 하나만 보여주는 기능 - <Switch>
매치되는 <Route> 들을 전부 보여주지 않고 한번에 하나만 보여주도록 하는 기능이다.
function App(){
return (
<div>
<Switch>
<Route exact path="/">
/로 이동
</Route>
<Route path="/detail">
<Detail/>
</Route>
<Route path="/:id">
<div>새로 만든 route입니다</div>
</Route>
</Switch>
</div>
)
}
'