react-router는 URL을 어느 페이지로 연결시킬지 결정하는 역할을 한다.

react는 Single Page Application 방식으로 동작한다. SPA 방식이라고 해서 한 종류의 화면만 있는 것이 아니기 때문에, 다른 화면에 따라 주소를 만들어 줘야 한다. 주소가 있어야 유저들이 북마크, 뒤로가기가 가능하다. 다른 주소에 따라 다른 화면을 보여주는 것을 라우팅이라고 하고, react 자체에는 이 기능이 내장되어 있지 않기 때문에 브라우저의 API인 react-router을 이용한다.

react-router는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해준다. 또한 서버 사이드 렌더링도 도와주는 도구들이 같이 딸려온다.

정리하자면! React-Router-Dom는 SPA 내부에서 페이지 이동을 가능하게 해주는 라이브러리이다.

React-Router-Dom 사용방법

Browser Router

• history API를 활용해 history 객체를 생성한다.
• history API는 내부적으로 stack 자료구조의 형태를 띄기 때문에 사용자가 방문한 url 기록들을 차곡차곡 쌓는 형태로 저장한다.
• 라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다.

Route

• 현재 브라우저의 경로에 따라 다른 element를 렌더링한다.
• element: path값이 일치할 때 렌더링 할 페이지, 컴포넌트를 넣어준다
• path: 경로, 현재의 url과 일치하는 path를 찾아 매칭된 element를 렌더링한다.

Routes

• 모든 Route의 상위 경로에 존재한다.
• 경로 변경시 하위의 모든 Route를 조회해 현재 경로와 맞는 Route를 찾는다.

• 설치를 원하는 디렉토리로 이동한 후 터미널에서 npm install react-router-dom --save를 입력한다.

• package.json 파일에 dependencies부분에 react-router-dom이 있는지 확인한다.

• src폴더에 있는 index.js파일에 BrowserRouter를 import 해주고 App.js 파일을 감싸준다.(보통 이렇긴한데 내가 지금 하고 있는 프로젝트에서 쓰는게 typescript랑 vite 합쳐진 그런거로 해서 main.tsx파일이 index.js파일이고, App.js도 App.tsx이다.)

  • main.tsx

    import { BrowserRouter } from 'react-router-dom'
    
    ...
    
    <BrowserRouter>
        <App />
    </BrowserRouter>

• App.tsx파일에서 react-router-dom을 import 해주고, 원하는 페이지를 URL로 연결해준다. 경로는 path속성에 작성하고, element에는 원하는 페이지,컴포넌트를 넣어준다. 이때 반드시 Routes 태그로 묶어줘야 한다.

• App.tsx

  <Routes>
  	<Route path="main" element={<Main />} />
      <Route path="myprofile" element={<MyProfile />} />
      <Route path="basicmodify" element={<BasicModify />} />
      <Route path="mentormodify" element={<MentorModify />} />
      <Route path="admin" element={<Admin />} />       
  </Routes>

중첩 라우팅 사용하기

Route안에 중첩 Route를 넣어서 서브 페이지를 만들어줄 수 있다. 서브 페이지의 path에는 /를 생략할 수 있고, element에는 원하는 페이지나 컴포넌트를 넣어주면 된다.

<Route path="/" element={<Home />} >
	<Route path="main" element={<Main />} />
</Route>

Outlet

중첩 라우팅을 사용할 때, 부모 라우터 컴포넌트에서 특정한 위치에 서브 페이지들을 보여줄 수 있다. 그 위치를 표시하는 것이 Outlet이다.

const Home = () => {
  return (
    <div>
      <Navbar />

      <Outlet />
    </div>
  )
}

...

<Routes>
        <Route path="/" element={<Home />} >
          <Route path="main" element={<Main />} />
          <Route path="myprofile" element={<MyProfile />} />
          <Route path="basicmodify" element={<BasicModify />} />
          <Route path="mentormodify" element={<MentorModify />} />
          <Route path="admin" element={<Admin />} />       
        </Route>
      </Routes>