[리액트 React] 라우터 (Router)

설치 명령어
npm install react-router-dom

 

Router Hook 종류

• useNavigate
• useParams
• Link
• useLocation
• 기타

 

사용 방법

 

1. Router.js 설정 import 

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

 

2. 연결 페이지 import 

• Work는 Works의 하위 페이지이다.
• {<Works/:id>} : id를 파라미터로 보내 조건에 맞는 페이지를 로딩할 것
• <Route path="*" element={<Navigate replace to="/" />} /> path에 지정된 url  외 다른 경로를 입력했을 경우 홈 화면으로 보내준다
• replace가 없을 경우 ex.works/aaa 로 입력 할 경우 홈 화면으로 들어가는데 뒤로가기를 누르면 다시 잘못된 경로로 들어가 홈 화면을 반복하게된다
• replace가 있으면 잘못된 경로로 들어와 홈 화면에서 뒤로가기를 누를 경우 마지막 경로로 돌아가게된다.
           

import Home from "../pages/Home";
import Works from "../pages/Works";
import Work from "../pages/Work";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        {/* 기본 페이지는 홈, 각 페이지별로 컴포넌트를 연결해준다 */}
        <Route path="/" element={<Home />} />
        <Route path="works" element={<Works />} />
        <Route path="works/:id" element={<Work />} /> 
       </Routes>
    </BrowserRouter>

export default Router;
// 이 파일을 내보내면 path를 사용할 수 있다

 

 

useNavigate

• 입력된 경로로 페이지를 이동시켜준다 a태그와 비슷하다.

function Home() {
  const navigate = useNavigate();

  return (
    <div>
      Home <br />
      <button
        onClick={() => {
          navigate("/works");
        }}
      >
        work로 이동
      </button>
    </div>
  );
}

 

 

useParams

• 파라미터의(변수에 담긴 값) 정보를 확인할 수 있다.
• 객체 또는 배열을 저장하여 구조를 확인하거나,  값을 가져와 사용할 수 있다.

function Work() {
  const params = useParams();
  console.log("params", params);
  // 파라미터를 확인하는 훅

  // 각 id별 todo인지 찾기
  const foundData = data.find((item) => {
    return item.id === parseInt(params.id);
  });

  console.log("foundData", foundData);

  return (
    <div>
      <h3>할 일 : {foundData.todo}</h3>
    </div>
  );
}

 

Link

• a태그 대신 사용한다.
• 리액트에서 a태그를 사용할 경우 모든 상태가 리랜더링 되어버리기 때문에 Link 를 사용한다.

function Works() {
  return (
    <div>
      <h3>할 일 목록</h3>
      {data.map((item) => {
        return (
          <div key={item.id}>
            <Link to={`/works/${item.id}`}>
              {item.id} {item.todo}
            </Link>
            {/* Link에 id를 파라미터로 보내는 방법 ex.href=board?seq={seq} 문법과 같다 */}
          </div>
        );
      })}
    </div>
  );
}

 

useLocation

• 객체 형태로 현재 페이지에 대한 정보가 담겨있다.(경로이름 등)

 

  const location = useLocation();

  console.log("location", location);

 

기타/ 데이터 사용하기

• js파일 또는 Json파일로 만들어서useParams을 이용해 값을 확인하거나 사용할 수 있다

export const data = [
  {
    id: 1,
    todo: "리액트 배우기",
  },
  {
    id: 2,
    todo: "노드 배우기",
  },
  {
    id: 3,
    todo: "스프링 배우기",
  },
  {
    id: 4,
    todo: "파이어베이스 배우기",
  },
  {
    id: 5,
    todo: "데이터베이스 배우기",
  },
  {
    id: 6,
    todo: "넥스트JS 배우기",
  },
];