리액트에서 URL에 따라 원하는 컴포넌트를 불러야할 땐
Router를 사용하면 쉽게 가능하며 사용자 친화적인 URL 이동 + 새로고침 방지를 위해 Link를 사용하면 심플하게 URL 전환 가능함

🦎 Router 사용법

먼저 npm 설치

npm i react-router-dom

라우팅 해줄 컴포넌트에서 import

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

아래와 같은 형식으로 필요한 경로 마다 Route 태그로 경로, 컴포넌트를 설정해줌

<Router> 
  <Routes>
    <Route path="경로1" element={컴포넌트1 태그} />
    <Route path="경로2" element={컴포넌트2 태그} />
  </Routes>
</Router>

😗 nested Route(중첩 라우트)를 사용하는 경우

( EX) 탭, 알림창, 블록 등.. )

컴포넌트 안에서 컴포넌트를 생성하게 되기에 각 컴포넌트를 Route 해주어야 하는데 이때 부모 컴포넌트가 라우팅 되는 URL주소 /* 으로
중첩이 될 수 있다고 표기 해주어야 하고 해당 부모 컴포넌트에서 각 자식 컴포넌트를 따로 라우팅 해주면 됨!

예를 들어 "/coin/bitcoin" 또는 "/coin/ethereum" 으로 중첩 라우팅을 해줘야
하는 경우 "/coin" 컴포넌트가 공통 부모이므로 "/coin"을 라우팅한 코드에서
path를 /coin/* 으로 수정 하고, 공통 부모 컴포넌트인 coin에서
bitcoin 또는 ethereum 둘을 라우팅 시켜주면 됨 ㅎㅎ

<Routes>
	<Route path={`bitcoin`} element={<bitcoin />} /> 
	<Route path={`ethereum`} element={<ethereum />} />  
</Routes>

🚃 Link

새로고침 없이 페이지를 이동 시키려면 Link 태그를 사용

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

<Link to="경로"> </Link>

동적으로 Link 경로를 만드려면 Route 경로에서 동적으로 지정할 경로 부분에
( :변수명 ) 형식으로 작성하면 됨

<Route path=".../:id" element={컴포넌트 태그} />

이 때 현재 URL에서 동적으로 변하는 id 값을 가져오려면
useParams로 간단하게 받아올 수 있음

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

const { params } = useParams();