[React] react-router-dom의 사용

1. 중첩 라우팅

Outlet & 직접표기 비교

> Router.js
<Routes>
    <Route path="web/*" element={<Web />}>
    	<Route path=":id" element={<WebPost />} />
    </Route>
</Routes>

> Web.js
const Web = () => {
  return (
    <div>
      <h1>This is Web</h1>
      <ul>
        <li>
          <Link to="1">Post #1</Link>
        </li>
      </ul>
// 여기서 Outlet을 통해서 불러오는 곳
      <Outlet />
    </div>
  );
};

> Router.js
<Routes>
    <Route path="web/*" element={<Web />} />
</Routes>

> Web.js
const Web = () => {
  return (
    <div>
      <h1>This is Web</h1>
      <ul>
        <li>
          <Link to="1">Post #1</Link>
        </li>
      </ul>
// 비교부분
	  <Routes>
        <Route path=":id" element={<WebPost />} />
      </Routes>
    </div>
  );
};

결론 : 중첩라우팅을 통해서 Router.js 부분에 Route를 한눈에 볼 수 있게 되었음

 

2. useLocation && useParams && useNavigate

1) useLocation Hook

경로정보를 담고있는 객체를 return한다.

{
  pathname: '/product/1',
  search: '',
  hash: '',
  state: null,
  key: 'default'
}

2) useParams Hook

path parameter 정보를 담고있는 객체를 return한다.

<BrowserRouter>
	<Routes>
		<Route path='/product/:id' element={<ProductDetail />} />
	</Routes>
</BrowserRouter>

사전에 Route설정부분에서 동적으로 표기를 해주어야 한다. 

// 현재 경로: /product/1

function ProductDetail(props) {
  const params = useParams();
  console.log(params);
  
  return (
   ...
  )
}

// 콘솔 결과.
{
  id: 1,
}

3) useNavigate Hook

함수를 return 하는데 페이지를 이동시키는 함수를 반환한다.

// navigate 라는 변수에 useNavigate 라는 함수를 할당하였음.
const navigate = useNavigate();

const queryString = filterQuery.concat(sortQuery);
// navigate 함수의 인자에 이동하고자 하는 url을 전달하면 해당 url로 화면을 이동시킨다.
navigate(`?${queryString}`);

인자에 정수값을 넣으므로써 방문기록에 남아있는 경로들을 앞 뒤로 탐색할 수 있다. 

navigate(-1); // 뒤로가기
navigate(-2); // 뒤로 2페이지 가기
navigate(1); // 앞으로 가기