노마드 마스터클래스 강의, react-router-dom에서 useNavigate redirect를 복습한 내용입니다.

React-router-dom

useNavigate()

react에서 사용자가 클릭할 때 Link 컴포넌트를 사용해서 페이지를 이동시키는데, 특정 상황에서는 이벤트 트리거없이 리다이렉트해야 할 때 사용한다.

createBrowserRouter에 /gohome을 추가하고 페이지 진입 3초 후, navigate를 사용해 /로 이동한다.

// GoHome.tsx

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

function GoHome() {
  const SECOND = 3000;
  const navigate = useNavigate();
  setTimeout(() => {
    navigate('/');
  }, SECOND);

  return (
    <div>
      <h1>GoHome</h1>
      <p>{SECOND / 1000}초 뒤에 메인으로 이동합니다. </p>
    </div>
  );
}

export default GoHome;

useParams()

사용자 리스트를 누르면 사용자를 소개하는 상세 페이지로 이동하는 간단한 예시를 만들어 보았다. db.ts에 임의의 사용자 리스트를 만들고, 클릭하면 사용자의 userId를 url 파라미터로 전달한다.

// Router.tsx

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      {
        path: '',
        element: <Home />,
      },
      {
        path: 'users',
        element: <Users />,
        children: [
          { 
            path: ':userId',
            element: <User /> 
          }
        ],
      },
    ],
    errorElement: <NotFound />,
  },
]);

users 경로에 사용자 리스트를 출력하고, users/:userId 경로에 사용자 상세페이지를 보여준다. 강의에서 나온대로 children을 두지 않고 path: 'users/:userId'로 작성하면 /users로 진입할 때, NotFound가 나오도록 할 수 있다.

Outlet

/users 경로의 자식이 있는 경우, Users 컴포넌트의 <Outlet />에 자식인 User 컴포넌트를 출력하도록 전달한다.

// Users.tsx

import { Link, Outlet } from 'react-router-dom';
import members from '../data/db';

function Users() {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {members.map(member => {
          return (
            <li key={member.userId}>
              <Link to={`/users/${member.userId}`}>{member.name}</Link>
            </li>
          );
        })}
      </ul>
      <Outlet />
    </div>
  );
}

export default Users;

절대경로, 상대경로

추가로, Link to=의 경로는 /users/${member.userId}과 같이 보통 root (/)부터 절대경로로 추가했는데, ${member.userId}로 슬래시를 빼면 현재 위치한 라우터를 기준으로 상대경로가 된다.

// User.tsx
import { Link, Outlet } from 'react-router-dom';
import members from '../data/db';

function Users() {
  return (
    <div>
      <h1>User List</h1>
      <ul>
        {members.map(member => {
          return (
            <li key={member.userId}>
              <Link to={`/users/${member.userId}`}>{member.name}</Link>
            </li>
          );
        })}
      </ul>
      <Outlet />
    </div>
  );
}

export default Users;

---

출처

• react-masterclass | nomadcoders
• useParams 전체코드 | github