React) useParams 기본 사용 방법 ... react-router-dom

URL에 있는 정보를 가져와 string으로 리턴한다. 

 

 

1) Router.tsx  (일부 / createBrowserRouter 이용)

 

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

# /users  에는 유저가 볼 수 있는 정보가 없으므로 바로 할당

 

---

2) Home.tsx (일부 / 위 코드의 기본 루트가 Home.tsx로 지정되어 있다.)

 

 <ul>
        {users.map((user) => (
          <li key={user.id}>
            <Link to={`/users/${user.id}`}>{user.name}</Link>
          </li>
        ))}
 </ul>

 

Link에 의해 해당 버튼을 누르면 user.id가 들어간 url로 이동하게 된다.

 

 

---

3 ) User.tsx (일부)

 

export default function User() {
  const { userId } = useParams();
  return (
    <h2>{`User with id ${userId} is named: ${
      users[Number(userId) - 1].name
    }`}</h2>
  );
}

Router.tsx 에서 할당한 :userId 를 useParams를 이용하여 가져온다.

 

(String으로 가져오므로, Number()를 이용하여 이용)

---

참고)

 

- https://nomadcoders.co/react-masterclass/lectures/4042