[React] 정적라우팅 Router DOM, useNavigate, useLocation, Link

1. Router DOM

Router DOM 설치

yarn add react-router-dom

 

1. 페이지 컴포넌트 작성 -> 다중 페이지

2. Router.js 파일 생성. router를 구성하는 설정 코드 작성

3. App.jsx import

4. 페이지 이동 테스트

 

import {BrowswerRouter, Route, Routes} from "react-router-dom"
import Home from "../src/components/Home";

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


export default Router;

 

이렇게 BrrowserRouter, Routes, Route

3가지를 import하고

위의 코드처럼 순서대로 감싸주면 된다.

 

마지막 Route에서

path는 위에 주소창에 표시될 문자열을 입력,

element에서는 연결될 컴포넌트 파일 태그를 입력해주면 된다.

 

그리고 App.jsx로 돌아와서

function App() {

  return (
    <Router></Router>
  );
}

아래 코드처럼 라우터 태그를 작성해주면

연결되는 것을 알 수 있다.

 

 

2. useNavigate

// src/pages/home.js
import { useNavigate } from "react-router-dom";

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

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

export default Home;

 

navigate를 변수에 할당한 뒤

아래 HTML 태그에서 onClick을 통해 연결해줄 수 있다.

 

3. useLocation

// src/pages/works.js
import { useLocation } from "react-router-dom";

const Works = () => {
  const location = useLocation();
  console.log("location :>> ", location);
  return (
    <div>
      <div>{`현재 페이지 : ${location.pathname.slice(1)}`}</div>
    </div>
  );
};

export default Works;

 

 

4. Link

 

HTML의 a태그와 유사한 문법이다.

JSX에서 a태그를 사용해야 한다면,

Link태그를 이용해 구현해야 합니다.

      <Link to="/contact">contact 페이지로 이동하기</Link>