React Router Dom

• v6로 버전업이 되면서 번들 크기가 이전 버전보다 약 70% 더 작아짐
• 더 작은 번들은 애플리케이션에 더 빨리 로드되고 사용자에게 콘텐츠가 더 빨리 로드된다는 것을 의미

React-router, React-router-dom, React-router-native

• React-router: 기본적인 React의 Router 관련 컴포넌트들을 포함
• React-router-dom: React-router의 컴포넌트들을 베이스로 dom(Web)에 집중된 라이브러리<BrowserRouter>, <Link> 컴포넌트 등을 추가적으로 포함한다.
• React-router-native: React-router-dom과 마찬가지로 native(app)에 집중된 컴포넌트 포함
• waht's the diff between react-router-dom & react-router?

$ npm i react-router-dom
$ yarn add react-router-dom

BrowserRouter

• React-router가 애플리케이션을 인식하고 제어하도록 알려주는 컴포넌트
• 최상위 컴포넌트를 감싸서 사용

import React from 'react';
import { BrowserRouter } from 'react-router-dom

ReactDOM.render (
  <BrwoserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

Router

• url 경로에 따른 React 컴포넌트를 매핑할는데 사용
• v6으로 넘어가면서 더이상 exact를 사용하지 않아도 됨
• 부모 경로의 상대적인 경로를 사용할수 있게됨으로써 중첩 경로가 있는 애플리케이션을 더욱 쉽게 구축하고 라우팅 로직을 더 쉽게 추론할수 있게됨

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

Routers

• 둘 이상의 Route 컴포넌트를 감싸는 상위 컴포넌트
• v6에 새롭게 도입된 컴포넌트, 기존의 Switch 컴포넌트 대신 사용
• 중첩 경로와 상대 경로를 좀 더 쉽게 정의할수 있게 되었다.

<Router>
  <Header />
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="about" element={<About />} />
    </Routes>
  <Footer />
</Router>

Link

• <Route> 컴포넌트와 마찬가지로 부모 경로의 상대적인 경로로 지정
• <a></a> 태그처럼 link를 생성하기 위한 컴포넌트
• to props를 활용하여 연결하려는 컴포넌트의 url을 작성
• 해당 url에 연결된 내부 컴포넌트로 이동할때 사용됨
• state prop을 사용하여 <Link>컴포넌트를 통해 새 경로로 데이터를 전달할 수 있다.
• useLocation Hook을 사용하여 state prop에 접근할 수 있다.

<nav>
  <Link to="/">Home</Link>
  <Link to="/about" state={{ from: "category" }}>About</Link>
</nav>

Url Parameters

• 매개변수를 함수에 전달하여 호출시 값을 동적으로 설정하는 것처럼 URL parameters를 사용하여 URL 부분에 대한 자리 표시자를 선언할 수 있다.
• 이러한 매개변수는 컴포넌트에 상태로 사용되도록 설정 가능
• Route의 path prop에서 :를 사용하여 URL의 특정 부분이 매개변수임을 React router에 알림

<Route path="/post/:postId" element={<Post/>} />

404 pages

• 경로에 정의되지 않은 페이지를 포착하려면 경로에 *를 기입
• 이 경로에서 전달하는 컴포넌트는 전달된 경로 중 일치하는 경우가 없을 때 렌더링된다.

<Route path="*" element={<NotFound />} />

Navigate

• 사용자를 리디렉션할 때 사용할 수 있는 Navigate 컴포넌트 제공

import { Navigate } from 'react-router-dom`;

const Redirect = () => {
  return <Navigate to="/home" replace />;
}

 // 사용 예제
import React from "react";
import { Outlet, useLocation, Navigate } from "react-router-dom";

const WithAuth = () => {
  const location = useLocation();

  return isLoggedIn ? (
      <Outlet />
  ) : (
    <Navigate to="/login" state={{ from: location }} />
  );
};

export default WithAuth;

Key Hooks

useNavigate vs useHistory

• react-router-dom v6 이전 에 사용된 useHistory hook은 push(라우터 이동), goBack(이전 페이지 이동) 등 라우팅에 관한 다양한 메소드들이 포함된 객체를 반환하는 훅
• react-router dom v6부터 useHistory를 대체하는 useNavigate라는 새로욱 훅을 제공
• useNavigate에서 제공하는 고유 기능은 navigate()에 -1, 1을 전달하면 이전 페이지 또는 다음 페이지로 이동

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

const GoAboutButton = () => {
  const navigate = useNavigate();
  
  function handleClick() {
    navigate('/about');
    // navigate(-1); 이전 페이지 이동
    // navigate(1); 다음 페이지 이동
  }
  
  return (
    <button type="button" onClick={handleclick}>go to the about page </button>
  )
}

useLocation

• 사용자의 현재 위치(경로)에 관한 데이터들을 포함된 객체를 제공
• hash: anchor part (#)
• pathname: 경로 이름
• search: query string 값
• state: Link 컴포넌트로부터 전달된 데이터값
• key:

useRoutes

• v6에 추가된 훅으로 객체 기반으로 경로를 정의
• vue의 라우팅방식처럼 프로그래밍 방식으로 경로를 구축할수 있음

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

const Example = () => {
  const routes = useRoutes([
    { path: "/", element: <Home /> },
    { path: "/about", element: <About /> },
    // ...
  ]);
  return routes;
};

참고하면 좋을 블로그글

• 더 나은 접근 방식으로 React 경로 정의(TypeScript)