[React router] useNavigate, useParams

1. useNavigate : 유저를 어딘가로 보내는 방법

const navigate = useNavigate();
  const goHome = () => {
    navigate('/home');
  };
  const goAbout = () => {
    navigate('/about');
  };
  return (
    <header>
      <ul>
        <li>
          <button onClick={goHome}>Home</button>
        </li>
        <li>
          <button onClick={goAbout}>About</button>
        </li>
      </ul>
    </header>
  );

1. useNavigate()를 navigate에 저장한다.

2. navigate(이동할 path)를 통해 navigate 시킨다.

 

 

2. useParams : url의 파라미터를 뽑아내는 방법

먼저, useParams를 사용하기 위해 파라미터가 존재하는 path를 만들어준다.

{
        path: 'users/:userId',
        element: <User />,
},

 

createBrowserRouter 나 BrowserRouter에 /:userId와 같이 path를 선언해준다면 

동적인 userId라는 이름을 가진 parameter를 가질 수 있음.

 

users로 가서 뭔가를 보는 것이 아니라 

users/1, users/2 와 같이 뒤에 무조건 userId값이 오기 때문에  다음과 같이 사용하는 것이다.

 

import { useParams } from 'react-router-dom';
import { users } from '../../db';

function User() {
  const { userId } = useParams();
  console.log(userId);
  return (
    <h1>
      User With {userId} is named : {users[Number(userId) - 1].name}
    </h1>
  );
}
export default User;

위처럼 useParams()를 사용하여 해당 Url의 파라미터 값을 받아올 수 있다

 

이렇게 다음과 같이 파라미터에서 userId를 꺼내준 뒤  Id를 이용하여 db의 값을 꺼내오는 식의 작업을 할 수 있다.