[Today I Learned] 12월 2주차 day2

suwoncityboyyy·2022년 12월 12일
0

react-router-dom

yarn add react-router-dom     //react-router-dom 설치
  • src폴더 하위에 pages폴더 생성 후 페이지별 파일 생성

  • shared라는 폴더를 만든 후 그안에 Router.js파일을 생성

//예시

import React from "react";
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";
import Layout from "./Layout";

const Router = () => {
  return (
    <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>
  );
};

export default Router;

  • App.js에 가서 Router파일 import 하기
import "./App.css";
import Router from "./shared/Router";

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

export default App;

useNavigate

return (
    <button
      onClick={() => {
        navigate("/works");    //  클릭시 works로 이동하게 해주는 router hook이다.
      }}
    >
      works로 이동
    </button>

useLocation

사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks이다.
객체 형식으로 보여주기 때문에 location.state로 접근할 수 있다.

a태그 대신에 사용가능하며 페이지를 넘어갈때 쓰임

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

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

export default Works;

dynamic route (동적라우트)

라우트 경로에 특정 id 값을 넣어 해당하는 페이지로 이동할 수 있게 하는 것을 동적라우팅 라고 한다.
참고자료

useParams

라우터 사용시 파라미터 정보를 가져와 활용할 수 있게 해주는 훅이다.
참고자료

profile
주니어 개발자 기술노트

0개의 댓글