라우터 사용법

우리가 평소 인터넷을 하다보면 클릭 시
해당 페이지로 이동하는 경험을 많이 해봤을 것이다.
그곳에서 사용되는 것이 바로 라우터이다.

라우터 사용법

라우터는 외부 라이브러리를 설치해야 한다.

• react-router-dom 설치 방법

  터미널 열어서
  npm install react-router-dom@6
  입력하면 설치된다.

• 설치 후 세팅 방법

(index.js 파일)

import {BrowerRouter} from "react-router-dom";

const root = ReactDOM.createRoot
(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowerRouter>
      <App/>
    </BrowerRouter>
 </React.strictMode>
);

후 <BrowerRouter>로 <App/>을 감싸면 된다.

라우터로 페이지 나누기

(App.js)

import {Routes,Route,Link,Outlet} from 'react-router-dom'

function App(){
  return(
   <Routes> 
     <Route path="/detail" element={<div>상세페이지</div>}/>
   	 <Route path="/about" element={<div>정보페이지</div>}/>
  </Routes>
  )
}

첫 페이지 url 뒤에

/detail -> 상세페이지로 이동
/about -> 정보페이지로 이동

페이지 이동 버튼

버튼을 누를 때 원하는 곳으로 이동하는 버튼을 만들고 싶다면
<Link>를 쓰면 된다.

<Link to="/">홈</Link>
<Link to="/detail">디테일</Link>
<Link to="/about">정보</Link>

를 하게 되면 각각 url경로로 이동하는 링크를 생성 할 수 있다.

서브경로 만드는 nested routes

<Route path="/about/member" element={<div>멤버</div>}/>
<Route path="/about/location" element={<div>위치</div>}/>

이렇게 서브 경로를 설정해 줄 수 있다.
혹은

<Route path="/about" element={<About/>}>
  <Route path="member" element={<div>멤버</div>}/>
  <Route path="location" element={<div>위치</div>}/>
</Route>

이렇게 해줄 수 있다.

<Outlet>

/about/member라고 칠 때 저 안의 element 값을 어디에다가 보여줘야 할지 알려주는 것이 바로 Outlet이다.

function About(){
  return(
    <div>
      <h4>about페이지</h4>
      <Outlet></Outlet>
    </div>
    )
}

이렇게 해주어야 원하는 위치에 원하는 것을 띄울 수 있다.

리액트 프로젝트 폴더 구조는?

물론 사람 마음이겠지만, 비슷한 .js 파일끼리 한 폴더에 넣어두는 것이 가장 좋다.

1. 컴포넌트 역할하는 파일들
   -> components 폴더
2. 페이지 역할하는 파일들
   -> routes 혹은 pages폴더에
   묶는것이 일반적이다.