[React.js] React Router 사용법

이 글은 React Router를 공부하고 정리한 글 입니다.

React Router이 뭔가요?

React Router은 리액트에서 여러 페이지를 만들고 사용할 때 사용하는 리액트 라이브러리입니다.
전문용어로 라우팅리라고 하죠.

기본 사용법

npm에서 react-router 라이브러리를 설치해줍니다.

npm i react-router

라우터의 기본 구조는 다음과 같은 컨포넌트 구조로 이루어져있습니다.

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={...} />
        <Route path="path1" element={...} />
        ...
      </Routes>
    </BrowserRouter>
  );
}

BrowserRouter라는 컨포넌트가 최상위에 있고
그 다음으로 Routes가 Route 컨포넌트들을 감싸고 있습니다.

Route의 element 속성은 해당 경로로 접속을 하면 보여줄 컨포넌트를 받고
index 속성이 있다면 루트 경로로 접속을 했을때 보여주는 컨포넌트 입니다.

import { Link, Outlet } from "react-router-dom";

<nav>
  <ui>
    <li>
      <Link to="/" >Home</Link>
    </li>
    <li>
      <Link to="/path1">path1롤 가기</Link>
    </li>
  </ui>
</nav>

Link 컨포넌트는 라우터의 경로를 이동하는 컨포넌트입니다.

Link 컨포넌트가 가지고 있는 속성을 다음과 같습니다.

• preventscrollreset : 페이지 이동시 스크롤이 최상단으로 이동하는 것을 방지합니다.

• state : 이동하는 페이지의 데이터를 전달 할 수 있습니다.
  state 속성을 사용해서 다음과 같이 name 데이터를 전달하면

  <Link to="new-path" state={{name : "박희찬"}}/>

  다음과 같이 name 데이터를 가져올 수 있습니다.

  const { state } = useLocation()
  
  const name = state.name

• reloadDocument : reloadDocument속성은 페이지를 이동할때 클라이언트측에서만 랜더링 하는게 아니라 처음 접속하는것 처럼 문서 전체를 재 랜더링을 합니다.