[React]Router / "react-router-dom"

라우팅이란?

사용자가 요청한 url에 따라 해당url에 맞는 페이지를 보여주는 것.
부분적인 페이지를 보여주는 방법으로써 CSR(Client Side Rendering) 을 완성한다.

React는 SPA(Single Page Application)이기 때문에 새로운 페이지를 가져오지는 않는다.

- router

routes를 감싸는 역할로써 router의 종류마다 역할이 제각각있다.
(BrowserRouter, HashRouter etc..)

- route

React Router app에서 가장 핵심 부분이다.

• path
  아래와 같이 사용 가능하며 라우트의 경로를 지정해준다. url, link href, from action 와 매칭된다.

     <Route path="/project/task?/:taskId" />

• element
  아래와 같이 사용 가능하며 url을 매칭해줄 때 사용한다.

      <Route path="/for-sale" element={<Properties />} />

  이 외에도 action, loader등 파라미터가 존재하지만 아직 사용하지 않았다.

사용법

1. 설치

   npm install react-router-dom

2. 기본 예제

import {
  BrowserRouter as Router,
  //Switch,
  Routes,
  Route
} from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Router>
        <div>
          <Routes>
            <Route exact path="/" element={<Homepage/>} />
            <Route exact path="/sign_in" element={<Loginpage/>} />
            <Route exact path="/sign_up" element={<Registerpage/>} />
          </Routes>
        </div>
      </Router>
	</BrowserRouter>
  );
}

export default App;

이와 같이 경로(주소)를 설정하고 해당 주소를 입력하면 이동할 컴포넌트를 지정할 수 있다.

3. 라우트간 이동

   • < Link >< /Link > 사용
     Router에서 제공하는 컴포넌트인 < Link >는 DOM에서는 < a >로 변환된다.
     이 때 지정경로를 선택해주면 해당 라우터로 이동하도록 해준다.
     • 간단하게 페이지 이동이 바로 되는 로직 구현 시 사용된다
     • 아이템 리스트 페이지(header ...)에서 아이템(home, login ...) 클릭시 상세 페이지로 이동한다.
   
   
   • useNavigate 사용
     예시 코드를 보면 다음과 같다

   import {useNavigate} from 'react-router-dom';
   ...
   const navigate = useNavigate();
   const gotomain = () =>{
     navigate("/");
   }
   return (
     <div>
     	<button onClick = {gotomain}>
     		login
   	</button>
     </div>
   );
   ...
   

   위와 같이 페이지 전환시 추가로 필요한 로직을 구현할 수 있다는 장점이 있다. 예를 들면 페이지 전환과 더불어 백엔드로 데이터 전송, 페이지 구성변경 등이 있을 것이다.(로그인 성공시 > 홈페이지와 다른 메인페이지 ...)