React Router Dom

패키지 설치하기

yarn add react-router-dom

 

사용방법 순서

Router.js에 Route 설정에 관련된 코드를 작성하고, 

최상위 컴포넌트인 App.js에서 import 해서 사용한다.

1. 페이지 컴포넌트 작성
2. Router.js 파일 생성 및 router를 구성하는 설정 코드 작성
   (ex: redux 할 때도 설정 파일 만들어서 주입)
3. App.jsx에 Router.js를 import하고 주입
4. 페이지 이동 테스트

 

프로젝트 구성

• App.jsx
• src/pages/Home.jsx
• src/pages/About.jsx
• src/pages/Contact.jsx
• src/pages/Works.jsx
• src/shared/Router.js

 

(src/shared/Router.js)

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.
import { BrowserRouter, Route, Routes } from "react-router-dom";

import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.
//BrowserRouter를 Router로 감싸는 이유는, 
//SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어줍니다!
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
		{/* 
		  Routes안에 이렇게 작성합니다. 
		  Route에는 react-router-dom에서 지원하는 props들이 있습니다.

		  path는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
		  element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.
		*/}
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

(App.js)

import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

 

react-router-dom Hooks

• useNavigate : 항해하다. 버튼을 눌러서 페이지를 이동시킬 때
  const navigate = useNavigate();
  ...
  <button onClick={() => { navigate("/works"); }} > works로 이동 </button>
  
  
• useLocation : 조건부 렌더링에서 유용
  const location = useLocation();
  return ( <div> {`현재 페이지 : ${location.pathname.slice(1)}`}</div>
  ...
  
  
• Link : a태그 대신에 Link api 사용
  import { Link} from 'react-router-dom';
  return ( <div> <Link to="/contact">contact 페이지로 이동하기</Link>
  ...
  
  
• useParams

 

children 용도

범용적인 박스 역할
sidebar나 dialog 같은 컴포넌트에서 사용
BrowserRoutes와 Routes사이에 Layout 추가해서 활용할 수 있음

...
    <BrowserRouter>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="works" element={<Works />} />
        </Routes>
      </Layout>
    </BrowserRouter>
...

---

동적 라우팅(Dynamic Routes)

path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 함.

Dynamic Route를 설정할때는 :id 로 설정하고, 

id 값은 useParams을 이용해서 각 컴포넌트에서 조회할 수 있다.

 

(src/shared/Router.js)

path에 works/:id 가 들어갑니다. :id 라는 것이 바로 동적인 값을 받겠다라는 의미.

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="works" element={<Works />} />
		{/* 아래 코드를 추가해주세요. 👇 */}
        <Route path="works/:id" element={<Work />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

 

(src/pages/Work.js)

Work컴포넌트 생성해서 query parameter 조회하기.

useParams 은 path의 있는 id 값을 조회할 수 있게 해주는 훅

import React from 'react';
import { useParams } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
  const param = useParams();

  const work = data.find((work) => work.id === parseInt(param.id));

  return <div>{work.todo}</div>;
}

export default Work;