Router 사용법

1. Router 란
2. Router 설치
3. Router 세팅
4. Router 컴포넌트
5. Router 사용하기

Router 란

• 페이지이동을 하는 방법으로,
  React는 SPA(single Page Application)방식이어서 여러개의 페이지를 사용하지 않고 같은 화면에 랜더링할 데이터만 바꿔준다.
• 각 페이지를 구분하기 위해 다른 url을 사용한다.

Router 설치

npm install react-router-dom

Router 세팅

index.js파일

 // BrowserRouter로 감싸기</br>
import { BrowserRouter } from "react-router-dom"; 
  	  root.render(
      <BrowserRouter>
      <App />
      </BrowserRouter>
      );

Router 컴포넌트

App.js에서 사용

//사용하는 컴포넌트 선언하기
import { Routes, Route } from "react-router-dom";

// Routes 태그 안에 원하는 페이지만큼 Route 태그를 만들어 스위치 작용한다.
<Routes>
  // 2가지 필수속성 path(페이지 경로 정하기), elemnt(넣어 줄 컴포넌트)
  <Route path="" elemnt={<A />} />
  <Route path="" elemnt={<B />} />
</Routes>

사용하기

url 이동(1) - Link

• 라우터간에 이동할 수 있게 도와줌
• a태그와 비슷함
• 함수 호출 필요없이 바로 사용

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

<Link to = "가고싶은 링크주소" />클릭</Link>

url 이동(2) - useNavigate (react Hook 사용)

• 라우터간에 이동할 수 있게 도와줌
• 함수 안에서 사용

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

const Home = () => {
  const navigate = useNavigate();
  
  const goToMarket = () => {
    navigate("가고싶은 링크주소")
  };
  return (
    <div>
     <h1>home</h1>
    <button onClick={goToMarket}>go to a market</button>
    </div>
  );
};

URL 경로 디자인 패턴(Restful Routes)

• url 디자인을 단순하고 통일성있게 함
  이미지 출처
• HTTP 명령어
  Get: 데이터를 가져올 때(fetch 할때의 기본명령어 속성이기도 함)
  Post: 데이터 생성
  Put(Patch): 데이터 수정
  Delete: 데이터 삭제

URL 파라미터값 읽어오기 - useParams(react hook)

url 설정

<Route path="/blogs/:id/:num" element={<itemDetailPage />} />

import { useParams } from "react-router-dom"

const params = useParams();
console.log("params",params)

// localhost:3000/blogs/abc/98
// 객체 형태로 반환 {id: 'abc', num:'98'}

distructuring 문법 사용

import { useParams } from "react-router-dom"

// key값으로 받아올 수 있음
const {id} = useParams();
console.log("id",id)

// localhost:3000/blogs/abc/98
// 객체 형태로 반환 {id: 'abc'}

쿼리값 읽기 - useSearchPrams(react hook)

• 쿼리값은 url 경로에 영향을 미치지 않음

import { useSearchParams } from "react-router-dom"

let [query,setQuery] = useSearchParams()
//localhost:3000/blogs/?q=cup&num=7
console.log(query.get('q')) // cup
console.log(query.get('num')) // 7

페이지 보호하기 - Navigate(component)

• 로그인이 필요한 상황일때 다른 페이지로 우회하기(redirect)

import { Navigate } from "react-router-dom"

function App() {
  const [authenticate,setAthenricate] = useState(false)
  const PrivateRoute = () => {
    // 로그인이 안 된 상태에서 상세페이지에 접근하려는 경우 로그인페이지로 우회
    return authenticate == true?<DetailPage/>:<Navigate to = "/login" />
  }
}

정리

1. 링크 주소를 만든다(Route 컴포넌트)
2. 이벤트 발생시 그 주소로 이동하게 한다(Link or useNavigate)