이번 프로젝트를 하면서 라우터의 개념에 대해 갈피를 잡지 못하여 다소 많은 시간을 써가며..
삽질을 많이 했었습니다.
구글링하면서 많이 애를 먹었던게 글 마다 버전이 달라서 문법 차이로 인해 버그가 잦았었고,
구조에 대해서 알기까지 좀 오랜시간이 들었었습니다.
삽질 하면서 알게된 정보를 여기에 한번 써 보려고 합니다.
이 글에서는 현재 최신버전이 버전6을 기준으로 작성하였습니다.
라우팅을 구성하기 위해 사용하는 기본적인 컴포넌트는
BrowserRouter, Routes, Route 이렇게 3가지로 나뉘게 됩니다.
먼저 BrowserRouter 컴포넌트는 웹 브라우저에서 React-Router를 사용하여 라우팅을 할 수 있도록
해주는 컴포넌트 입니다. 웹 브라우저에는 history 라는 기능이 내장되어있는데,
이 history에는 사용자가 탐색한 페이지들의 방문기록이 저장됩니다.
그래서 뒤로 가기 버튼을 누를 경우 이전에 방문 했던 페이지를 history에서 찾아서
이동하게 해 주는 겁니다.
BorwserRouter 컴포넌트는 이 history를 이용해서 경로를 탐색할 수 있게 해 주는
컴포넌트라고 이해하면 됩니다.
Routes와 Route 컴포넌트는 실제로 라우팅 경로를 구성할 수 있게 해 주는 컴포넌트 입니다.
Routes 컴포넌트는 뒤에 알파벳 s가 붙어서 복수를 나타내는것 처럼 여러개의 Route 컴포넌트를
children으로 가집니다.
Route 컴포넌트는 Routes 컴포넌트의 하위 컴포넌트로써 path와 element라는 prop를 가지고 있습니다.
여기에 path는 경로를 의미하고, element는 경로가 일치할 경우 렌더링을 할 리액트 엘리먼트를 의미합니다.
index.js 파일에 이렇게 추가해주면 됩니다.
|
1
2
3
4
5
6
7
|
<BrowserRouter>
<Routes>
<Route index element={<메인페이지 />} />
<Route path="이동할페이지1" element={<이동할페이지1 />} />
<Route path="이동할페이지2" element={<이동할페이지2 />} />
</Routes>
</BrowerRouter>
|
cs |
App.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
... 생략 ...
function App(props) {
return(
<BrowserRouter>
<MainTitleText>제목</MainTitleText>
<Routes>
<Route index element={<메인페이지 />} />
<Route path="이동할페이지1" element={<이동할페이지1 />} />
<Route path="이동할페이지2" element={<이동할페이지2 />} />
</Routes>
</BrowerRouter>
);
}
export default App;
|
cs |
이 방법외에도 Link to 라던지 여러 방법이 있지만 그 방법들은 다음 글에서 적겠습니다.