[공부] React Router

VS Code에서 실행

 

Router

ㅡ Server의 Resource 경로를 추적하고 있다가 해당 경로가 바뀌면 바뀐 경로의 Resource를 반환해주는 기능

ㅡ 터미널창에서 npm install react-router-dom으로 설치 후 사용

 

ㅡ root 위치에 있는 index.tsx의 render 함수 내부에 <BrowserRouter>로 App Component 감싸기

 

Route Component

ㅡ Resource Path에 따라 보여주고자 하는 Component를 지정할 때 사용

<Routes>
      <Route path = 'test' element ={(<Typography variant = 'h3'>Test Page</Typography>)}/>
 </Routes>

 

Link Component

ㅡ Web 서버 내에서 특정한 Resource Path로 변경하고자 할 때 사용

<Link to = '/test'>test</Link>

 

useNavigate Hook 함수

ㅡ Rosource Path를 변경시켜주는 Hook 함수

import { useNavigate } from = 'react-router-dom';

const navigateName = useNavigate(); // const 네비게이트 명

navigateName(path);

 

Resource Path를 변경시키기 전에 특정 작업을 할 때 사용

 

useParams Hook 함수

ㅡ Resource Path로 부터 특정 값을 가져올 때 사용

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

const { pathValue } = useParams(); // { 변수명 }

 

 

navigate hook 및 Link의 path 자리에 '/'가 붙지 않으면 현재 path뒤에 /경로가 추가됨

 

 

useLocation Hook 함수

ㅡ 현재 Resource Path에 대한 정보를 객체로 반환해주는 Hook 함수

import { useLocation } from 'react-router-dom';

const 상수명 = useLocation();

상수명.pathname :  가져온 path의 이름 사용