react-router-dom (v6) 사용법

최초 라우팅 설정

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

• Router가 아닌 BrowserRouter로 했을 때 제대로 동작한다.

function Router() {
  return (
    <BrowserRouter>
       <Routes>
          <Route path="/" element={<Coins />}></Route>
          <Route path="/:coinId*" element={<Coin />}></Route>
       </Routes>
     </BrowserRouter>
  );
}

• Router 안에 Routes, Routes 안에 Route의 Props로 이동할 컴포넌트를 결정한다.
• Nested Routing을 하고 싶다면 path의 value 가장 끝에 *을 삽입하여 네스팅을 하겠다는 선언을 미리 할 수 있다.

path와 params Props의 설정

path="/" element={<Home />}

• 홈화면으로 지정할 컴포넌트에는 path값을 "/"로 지정한다.
• 각 path의 대상이 되는 컴포넌트는 element 안에 지정한다.

path="/example:key"

• URL 내부값을 이런 식으로 지정할 수 있다.
• params를 지정할 때는 반드시 콜론:을 넣고 그 뒤에 Params 변수명을 입력한다.
• 마치 string처럼 보여서 중요하지 않아 보일 수도 있지만 :파라미터명을 통해 URL으로 입력받는 값을 그대로 Route Element에게 전달해줄 수 있게 되는 것이다.

import { useParams } from "react-router-dom";
const key = useParams().key

• Params 값을 받아야하는 컴포넌트에서는 다음과 같이 useParams를 import하여 매번 달라지는 key 값을 받아올 수 있다.

다른 라우팅으로의 Link 설정

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

• 다른 컴포넌트를 호출하기 위한 하이퍼링크가 존재하는 상위 컴포넌트에 Link를 import 해야한다.

<Link to={`/example/${key}}`>

• 이동하고 싶은 컴포넌트 주소를 위와 같이 호출한다.

라우터로 state 보내고 useLocation()로 받기

<Link
	to={item.id}
	state={{
		name: item.name,
		id: item.id,
	}}
>

• state를 이용하면 넘어갈 페이지에게 다양한 데이터를 Object 형식으로 보낼 수 있다.

const { state } = useLocation();

• 받을 때는 useParams처럼 똑같이 받아서 쓰면 Object로 받아진다.

React Router