23.06.22) React Router Dom 패키지

📌React Router Dom란?

: 페이지를 구현할 수 있게 해주는 패키지

• ex) https://www.tistory.com/  ( / 뒤에 오는 주소가 route)

👉 패키지 설치 명령어

yarn add react-router-dom

 

👉 React Router Dom 순서

1. 페이지 컴포넌트 생성 → 다중 페이지

   src폴더 > pages폴더 > ex)Home.jsx , About.jsx, Work.jsx

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

    src폴더 > shared폴더 > Router.js

3. App.jsx에 import 및 적용

 

 

👉코드 작성법

1. 페이지 컴포넌트 생성 → 다중 페이지

   src폴더 > pages폴더 > ex)Home.jsx , About.jsx, Work.jsx

   ex) http://localhost:3000/home

        http://localhost:3000/about

        http://localhost:3000/work

 

 

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

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

• react-router-dom을 사용하기 위해서 API (BrowserRouter, Route, Routes) import 해야한다
• Router 라는 함수를 만들고 BrowserRouter를 Router로 감싸는 이유는
  SPA의 장점인 브라우저가 깜빡이지 않고 다른 페이지로 이동할 수 있게 만들어주기 때문이다
• 리턴값도 컴포넌트 형식이다

 

 

<Routes>
  <Route path="/" element={<Home />} />
  <Route path="about" element={<About />} />
  <Route path="works" element={<Works />} />
</Routes>

• <Routes>안에 <Route>로 상세페이지들을 연결해준다 → routing 설정 완료
• Route에는 react-router-dom에서 지원하는 props들이 있다
  (1) path = 사용하고싶은 주소 (경로)
  (2) element = 해당 주소로 이동했을 때 연결되는 컴포넌트

 

 

3. App.jsx에 import 및 적용

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

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

export default App;

• App.jsx는 프로젝트의 최상단 컴포넌트기 때문에 Router.js를 App 컴포넌트에 넣어준다
  ▷ path 별로 분기가 되는 Router.js 를 App.js에 위치시키고 항상 App.js → Router.js 를 거치는 흐름