리액트는 SPA(Single Page Application) 방식으로 여러 개의 페이지를 이용해 페이지간 이동 개념이 아닌, 하나의 페이지 안에서 상황에 따라 필요 데이터만을 load 해주는 형태를 가진다.
이 때, URL 의 값에 따른 View Page 를 load 해서 보여주는 기능을 리액트-라우터(React-Router)가 담당한다.
각각 페이지마다 다른 HTML 파일을 보여주는 것이 아니라 HTML 내부의 내용을 수정해서 다른페이지처럼 보이게 하는것
react-router-dom을 설치합니다.
터미널에 react-router-dom 설치
1. yarn add react-router-dom
2. npm install react-router-dom
설치 후 index.js 파일에 라우트 세팅을 합니다.
(index.js)
import { BrowserRouter } from 'react-router-dom'; //여기 import 합니다.
ReactDOM.render(
<React.StrictMode>
<BrowserRouter> // 브라우저라우터 태그로 앱태그를 감쌉니다.
<App/>
</BrowserRouter> //
</React.StrictMode>
document.getElementById('root')
);
우선 페이지를 이동하려면 react-router-dom의 여러 태그를 import합니다.
import { Link, Route, Switch } from 'react-router-dom';
라우팅 할 곳에 <Route>태그를 작성하고 안에 이동할 경로(path)와 path 방문시 보여줄 HTML을 작성하면 됩니다.
(app.js)
import { Link, Route, Switch } from 'react-router-dom';
function App(){
return (
<div>
<Route path="/">
<div>메인페이지</div>
</Route>
<Route path="/detail">
<div>상세페이지</div>
</Route>
</div>
)
}
exact라는 속성을 이용하면 경로와 정확이 일치한 페이지만 보여준다.
<Route exact path="/">
<div>메인페이지</div>
</Route>
Switch는 첫번째로 매칭되는 path 를 가진 컴포넌트를 렌더링 시킨다. 이것이 exact path 와 다른 점은 첫번째 매칭만 본다
(app.js)
import { Link, Route, Switch } from 'react-router-dom';
function App(){
return (
<div>
<Switch>
<Route path="/">
<div>메인페이지</div>
</Route>
<Route path="/detail">
<div>상세페이지</div>
</Route>
</Switch>
</div>
)
}
(app.js)
import { Link, Route, Switch } from 'react-router-dom';
function App(){
return (
<div>
<Link to="/">Home</Link>
<Link to="/detail">Detail</Link>
</div>
)
}
Link태그는 to속성을 이용해서 경로이동이 가능하다.
a태그와 유사하다.