React-router-dom

1. 설치

yarn add react-router-dom 

2. 폴더 구성
   scr/shared/Router.js

3. 사용하는 법

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      	<Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

Router.js 생성 후 App.js에 import 해주기

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

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

export default App;

react-router-dom Hooks

1. useNavigate
   컴포넌트의 클릭 이벤트 핸들러를 통해서 활용

// src/App.js

const App = () => {
  const navigate = useNavigate();

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

export default App;

2. useLocation
   이건 아직 잘 모르겠음

3. Link
   hook 아님 그러나 필요함. Link는 a 태그 기능 대체하는 api

// src/App.js

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

const App = () => {
  return <Link to="/contact">Home</Link>;
};

export default App;

항상 import export 해주는거 잊지말기

4. useParams
   url의 query를 알 수 있음 자세한건 더 찾아보기

Dynamic Route 동적 라우팅

path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법

1. 동적 라우팅 설정하기
   원하는 페이지에서 아래 코드 작성

// src/pages/Work.js

import React from "react";

const Work = () => {
  return <div>Work</div>;
};

export default Work;

Router.js의 Routes 에서 아래 코드 추가

<Route path="works/:id" element={<Works />} />

:id는 useParams 에서 조회할 수 있다.

2. Dynamic Routes, useParam
   뭔 말이야..애매하게 설명해놔서 다시 조사해봐야겠음